[Client] Use dynamic import to reduce bundle size

4 files changed, 12 insertions, 5 deletions

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 5665ef88dd..914285ac46 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -40,7 +40,6 @@ import twitterSetting from './twitter-setting.vue';
 import githubSetting from './github-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
 import emoji from './emoji.vue';
-import Reversi from './games/reversi/reversi.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './ui/input.vue';
 import uiButton from './ui/button.vue';
@@ -95,7 +94,6 @@ Vue.component('mk-twitter-setting', twitterSetting);
 Vue.component('mk-github-setting', githubSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-emoji', emoji);
-Vue.component('mk-reversi', Reversi);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);
 Vue.component('ui-button', uiButton);
diff --git a/src/client/app/desktop/views/components/game-window.vue b/src/client/app/desktop/views/components/game-window.vue
index 10e974d42a..adf61bb161 100644
--- a/src/client/app/desktop/views/components/game-window.vue
+++ b/src/client/app/desktop/views/components/game-window.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
 	<span slot="header" :class="$style.header"><fa icon="gamepad"/>%i18n:@game%</span>
-	<mk-reversi :class="$style.content" @gamed="g => game = g"/>
+	<x-reversi :class="$style.content" @gamed="g => game = g"/>
 </mk-window>
 </template>
 
@@ -10,6 +10,9 @@ import Vue from 'vue';
 import { url } from '../../../config';
 
 export default Vue.extend({
+	components: {
+		XReversi: () => import('../../../common/views/components/games/reversi/reversi.vue')
+	},
 	data() {
 		return {
 			game: null
diff --git a/src/client/app/desktop/views/pages/games/reversi.vue b/src/client/app/desktop/views/pages/games/reversi.vue
index 1b0e790a22..ecf138bdda 100644
--- a/src/client/app/desktop/views/pages/games/reversi.vue
+++ b/src/client/app/desktop/views/pages/games/reversi.vue
@@ -1,6 +1,6 @@
 <template>
 <component :is="ui ? 'mk-ui' : 'div'">
-	<mk-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/>
+	<x-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/>
 </component>
 </template>
 
@@ -8,6 +8,9 @@
 import Vue from 'vue';
 
 export default Vue.extend({
+	components: {
+		XReversi: () => import('../../../../common/views/components/games/reversi/reversi.vue')
+	},
 	props: {
 		ui: {
 			default: false
diff --git a/src/client/app/mobile/views/pages/games/reversi.vue b/src/client/app/mobile/views/pages/games/reversi.vue
index 5b212b07dd..d02bc191aa 100644
--- a/src/client/app/mobile/views/pages/games/reversi.vue
+++ b/src/client/app/mobile/views/pages/games/reversi.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header"><span style="margin-right:4px;"><fa icon="gamepad"/></span>%i18n:@reversi%</span>
-	<mk-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/>
+	<x-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/>
 </mk-ui>
 </template>
 
@@ -9,6 +9,9 @@
 import Vue from 'vue';
 
 export default Vue.extend({
+	components: {
+		XReversi: () => import('../../../../common/views/components/games/reversi/reversi.vue')
+	},
 	mounted() {
 		document.title = `${(this as any).os.instanceName} %i18n:@reversi%`;
 	},