[Client] Split some components to reduce bundle size

7 files changed, 24 insertions, 8 deletions

diff --git a/src/client/app/mobile/views/components/drive-file-chooser.vue b/src/client/app/mobile/views/components/drive-file-chooser.vue
index 92919c73c0..b72c796c1d 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -6,7 +6,7 @@
 			<button class="close" @click="cancel"><fa icon="times"/></button>
 			<button v-if="multiple" class="ok" @click="ok"><fa icon="check"/></button>
 		</header>
-		<mk-drive class="drive" ref="browser"
+		<x-drive class="drive" ref="browser"
 			:select-file="true"
 			:multiple="multiple"
 			@change-selection="onChangeSelection"
@@ -22,6 +22,9 @@ import i18n from '../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/components/drive-file-chooser.vue'),
+	components: {
+		XDrive: () => import('./drive.vue').then(m => m.default),
+	},
 	props: ['multiple'],
 	data() {
 		return {
diff --git a/src/client/app/mobile/views/components/drive-folder-chooser.vue b/src/client/app/mobile/views/components/drive-folder-chooser.vue
index 4d08679624..250a7aca2c 100644
--- a/src/client/app/mobile/views/components/drive-folder-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-folder-chooser.vue
@@ -6,7 +6,7 @@
 			<button class="close" @click="cancel"><fa icon="times"/></button>
 			<button class="ok" @click="ok"><fa icon="check"/></button>
 		</header>
-		<mk-drive ref="browser"
+		<x-drive ref="browser"
 			select-folder
 		/>
 	</div>
@@ -18,6 +18,9 @@ import Vue from 'vue';
 import i18n from '../../../i18n';
 export default Vue.extend({
 	i18n: i18n('mobile/views/components/drive-folder-chooser.vue'),
+	components: {
+		XDrive: () => import('./drive.vue').then(m => m.default),
+	},
 	methods: {
 		cancel() {
 			this.$emit('canceled');
diff --git a/src/client/app/mobile/views/components/index.ts b/src/client/app/mobile/views/components/index.ts
index 38c130ecbf..5e9640bf01 100644
--- a/src/client/app/mobile/views/components/index.ts
+++ b/src/client/app/mobile/views/components/index.ts
@@ -5,7 +5,6 @@ import note from './note.vue';
 import notes from './notes.vue';
 import mediaImage from './media-image.vue';
 import mediaVideo from './media-video.vue';
-import drive from './drive.vue';
 import notePreview from './note-preview.vue';
 import subNoteContent from './sub-note-content.vue';
 import noteCard from './note-card.vue';
@@ -29,7 +28,6 @@ Vue.component('mk-note', note);
 Vue.component('mk-notes', notes);
 Vue.component('mk-media-image', mediaImage);
 Vue.component('mk-media-video', mediaVideo);
-Vue.component('mk-drive', drive);
 Vue.component('mk-note-preview', notePreview);
 Vue.component('mk-sub-note-content', subNoteContent);
 Vue.component('mk-note-card', noteCard);
diff --git a/src/client/app/mobile/views/pages/drive.vue b/src/client/app/mobile/views/pages/drive.vue
index e5085d2aa1..2aca540506 100644
--- a/src/client/app/mobile/views/pages/drive.vue
+++ b/src/client/app/mobile/views/pages/drive.vue
@@ -6,7 +6,7 @@
 		<template v-if="!folder && !file"><span style="margin-right:4px;"><fa icon="cloud"/></span>{{ $t('@.drive') }}</template>
 	</span>
 	<template slot="func"><button @click="fn"><fa icon="ellipsis-h"/></button></template>
-	<mk-drive
+	<x-drive
 		ref="browser"
 		:init-folder="initFolder"
 		:init-file="initFile"
@@ -29,6 +29,9 @@ import Progress from '../../../common/scripts/loading';
 
 export default Vue.extend({
 	i18n: i18n(),
+	components: {
+		XDrive: () => import('../components/drive.vue').then(m => m.default),
+	},
 	data() {
 		return {
 			Progress,
diff --git a/src/client/app/mobile/views/pages/messaging-room.vue b/src/client/app/mobile/views/pages/messaging-room.vue
index 2bd506b6a6..648a5d72e9 100644
--- a/src/client/app/mobile/views/pages/messaging-room.vue
+++ b/src/client/app/mobile/views/pages/messaging-room.vue
@@ -4,7 +4,7 @@
 		<template v-if="user"><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span>{{ user | userName }}</template>
 		<template v-else><mk-ellipsis/></template>
 	</span>
-	<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>
+	<x-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>
 </mk-ui>
 </template>
 
@@ -15,6 +15,9 @@ import parseAcct from '../../../../../misc/acct/parse';
 
 export default Vue.extend({
 	i18n: i18n(),
+	components: {
+		XMessagingRoom: () => import('../../../common/views/components/messaging-room.vue').then(m => m.default)
+	},
 	data() {
 		return {
 			fetching: true,
diff --git a/src/client/app/mobile/views/pages/messaging.vue b/src/client/app/mobile/views/pages/messaging.vue
index 9af5d1cd1e..918f925f3a 100644
--- a/src/client/app/mobile/views/pages/messaging.vue
+++ b/src/client/app/mobile/views/pages/messaging.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header"><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span>{{ $t('@.messaging') }}</span>
-	<mk-messaging @navigate="navigate" :header-top="48"/>
+	<x-messaging @navigate="navigate" :header-top="48"/>
 </mk-ui>
 </template>
 
@@ -12,6 +12,9 @@ import getAcct from '../../../../../misc/acct/render';
 
 export default Vue.extend({
 	i18n: i18n(),
+	components: {
+		XMessaging: () => import('../../../common/views/components/messaging.vue').then(m => m.default)
+	},
 	mounted() {
 		document.title = `${this.$root.instanceName} ${this.$t('@.messaging')}`;
 	},
diff --git a/src/client/app/mobile/views/pages/selectdrive.vue b/src/client/app/mobile/views/pages/selectdrive.vue
index 633c83e40d..095c19cf2c 100644
--- a/src/client/app/mobile/views/pages/selectdrive.vue
+++ b/src/client/app/mobile/views/pages/selectdrive.vue
@@ -5,7 +5,7 @@
 		<button class="upload" @click="upload"><fa icon="upload"/></button>
 		<button v-if="multiple" class="ok" @click="ok"><fa icon="check"/></button>
 	</header>
-	<mk-drive ref="browser" select-file :multiple="multiple" is-naked :top="$store.state.uiHeaderHeight"/>
+	<x-drive ref="browser" select-file :multiple="multiple" is-naked :top="$store.state.uiHeaderHeight"/>
 </div>
 </template>
 
@@ -15,6 +15,9 @@ import i18n from '../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/selectdrive.vue'),
+	components: {
+		XDrive: () => import('../components/drive.vue').then(m => m.default),
+	},
 	data() {
 		return {
 			files: []