[Client] Split some components to reduce bundle size

src/client/app/common/views/components/index.ts

@@ -32,8 +32,6 @@ import mediaList from './media-list.vue';
 import uploader from './uploader.vue';
 import streamIndicator from './stream-indicator.vue';
 import ellipsis from './ellipsis.vue';
-import messaging from './messaging.vue';
-import messagingRoom from './messaging-room.vue';
 import urlPreview from './url-preview.vue';
 import twitterSetting from './twitter-setting.vue';
 import githubSetting from './github-setting.vue';
@@ -85,8 +83,6 @@ Vue.component('mk-media-list', mediaList);
 Vue.component('mk-uploader', uploader);
 Vue.component('mk-stream-indicator', streamIndicator);
 Vue.component('mk-ellipsis', ellipsis);
-Vue.component('mk-messaging', messaging);
-Vue.component('mk-messaging-room', messagingRoom);
 Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-twitter-setting', twitterSetting);
 Vue.component('mk-github-setting', githubSetting);

src/client/app/desktop/views/components/choose-file-from-drive-window.vue

@@ -5,7 +5,7 @@
 		<span :class="$style.count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span>
 	</span>
 
-	<mk-drive
+	<x-drive
 		ref="browser"
 		:class="$style.browser"
 		:multiple="multiple"
@@ -25,6 +25,9 @@ import Vue from 'vue';
 import i18n from '../../../i18n';
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/choose-file-from-drive-window.vue'),
+	components: {
+		XDrive: () => import('./drive.vue').then(m => m.default),
+	},
 	props: {
 		multiple: {
 			default: false

src/client/app/desktop/views/components/choose-folder-from-drive-window.vue

@@ -4,7 +4,7 @@
 		<span :class="$style.title">{{ $t('choose-prompt') }}</span>
 	</span>
 
-	<mk-drive
+	<x-drive
 		ref="browser"
 		:class="$style.browser"
 		:multiple="false"
@@ -21,6 +21,9 @@ import Vue from 'vue';
 import i18n from '../../../i18n';
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/choose-folder-from-drive-window.vue'),
+	components: {
+		XDrive: () => import('./drive.vue').then(m => m.default),
+	},
 	methods: {
 		ok() {
 			this.$emit('selected', (this.$refs.browser as any).folder);

src/client/app/desktop/views/components/drive-window.vue

@@ -4,7 +4,7 @@
 		<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> {{ $t('used') }}</p>
 		<span :class="$style.title"><fa icon="cloud"/>{{ $t('@.drive') }}</span>
 	</template>
-	<mk-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/>
+	<x-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/>
 </mk-window>
 </template>
 
@@ -15,6 +15,9 @@ import { url } from '../../../config';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/drive-window.vue'),
+	components: {
+		XDrive: () => import('./drive.vue').then(m => m.default),
+	},
 	props: ['folder'],
 	data() {
 		return {

src/client/app/desktop/views/components/index.ts

@@ -16,7 +16,6 @@ import noteForm from './post-form.vue';
 import renoteForm from './renote-form.vue';
 import followButton from './follow-button.vue';
 import notePreview from './note-preview.vue';
-import drive from './drive.vue';
 import noteDetail from './note-detail.vue';
 import settings from './settings.vue';
 import calendar from './calendar.vue';
@@ -42,7 +41,6 @@ Vue.component('mk-post-form', noteForm);
 Vue.component('mk-renote-form', renoteForm);
 Vue.component('mk-follow-button', followButton);
 Vue.component('mk-note-preview', notePreview);
-Vue.component('mk-drive', drive);
 Vue.component('mk-note-detail', noteDetail);
 Vue.component('mk-settings', settings);
 Vue.component('mk-calendar', calendar);

src/client/app/desktop/views/components/messaging-room-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="comments"/>{{ $t('title') }} {{ user | userName }}</span>
-	<mk-messaging-room :user="user" :class="$style.content"/>
+	<x-messaging-room :user="user" :class="$style.content"/>
 </mk-window>
 </template>
 
@@ -13,6 +13,9 @@ import getAcct from '../../../../../misc/acct/render';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/messaging-room-window.vue'),
+	components: {
+		XMessagingRoom: () => import('../../../common/views/components/messaging-room.vue').then(m => m.default)
+	},
 	props: ['user'],
 	computed: {
 		popout(): string {

src/client/app/desktop/views/components/messaging-window.vue

@@ -1,7 +1,7 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" @closed="destroyDom">
 	<span slot="header" :class="$style.header"><fa icon="comments"/>{{ $t('title') }}</span>
-	<mk-messaging :class="$style.content" @navigate="navigate"/>
+	<x-messaging :class="$style.content" @navigate="navigate"/>
 </mk-window>
 </template>
 
@@ -12,6 +12,9 @@ import MkMessagingRoomWindow from './messaging-room-window.vue';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/messaging-window.vue'),
+	components: {
+		XMessaging: () => import('../../../common/views/components/messaging.vue').then(m => m.default)
+	},
 	methods: {
 		navigate(user) {
 			this.$root.new(MkMessagingRoomWindow, {

src/client/app/desktop/views/pages/deck/deck.vue

@@ -25,9 +25,6 @@ import i18n from '../../../../i18n';
 import XColumnCore from './deck.column-core.vue';
 import Menu from '../../../../common/views/components/menu.vue';
 import MkUserListsWindow from '../../components/user-lists-window.vue';
-import XUserColumn from './deck.user-column.vue';
-import XNoteColumn from './deck.note-column.vue';
-import XHashtagColumn from './deck.hashtag-column.vue';
 
 import * as uuid from 'uuid';
 
@@ -35,9 +32,9 @@ export default Vue.extend({
 	i18n: i18n('deck'),
 	components: {
 		XColumnCore,
-		XUserColumn,
-		XNoteColumn,
-		XHashtagColumn
+		XUserColumn: () => import('./deck.user-column.vue').then(m => m.default),
+		XNoteColumn: () => import('./deck.note-column.vue').then(m => m.default),
+		XHashtagColumn: () => import('./deck.hashtag-column.vue').then(m => m.default)
 	},
 
 	computed: {

src/client/app/desktop/views/pages/drive.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-drive-page">
-	<mk-drive :init-folder="folder" @move-root="onMoveRoot" @open-folder="onOpenFolder"/>
+	<x-drive :init-folder="folder" @move-root="onMoveRoot" @open-folder="onOpenFolder"/>
 </div>
 </template>
 
@@ -10,6 +10,9 @@ import i18n from '../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/pages/drive.vue'),
+	components: {
+		XDrive: () => import('../components/drive.vue').then(m => m.default),
+	},
 	data() {
 		return {
 			folder: null

src/client/app/desktop/views/pages/messaging-room.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-messaging-room-page">
-	<mk-messaging-room v-if="user" :user="user" :is-naked="true"/>
+	<x-messaging-room v-if="user" :user="user" :is-naked="true"/>
 </div>
 </template>
 
@@ -13,6 +13,9 @@ import getUserName from '../../../../../misc/get-user-name';
 
 export default Vue.extend({
 	i18n: i18n('.vue'),
+	components: {
+		XMessagingRoom: () => import('../../../common/views/components/messaging-room.vue').then(m => m.default)
+	},
 	data() {
 		return {
 			fetching: true,

src/client/app/desktop/views/pages/selectdrive.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mkp-selectdrive">
-	<mk-drive ref="browser"
+	<x-drive ref="browser"
 		:multiple="multiple"
 		@selected="onSelected"
 		@change-selection="onChangeSelection"
@@ -19,6 +19,9 @@ import i18n from '../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/pages/selectdrive.vue'),
+	components: {
+		XDrive: () => import('../components/drive.vue').then(m => m.default),
+	},
 	data() {
 		return {
 			files: []

src/client/app/desktop/views/widgets/messaging.vue

@@ -4,7 +4,7 @@
 		<template slot="header"><fa icon="comments"/>{{ $t('title') }}</template>
 		<button slot="func" @click="add"><fa icon="plus"/></button>
 
-		<mk-messaging ref="index" compact @navigate="navigate"/>
+		<x-messaging ref="index" compact @navigate="navigate"/>
 	</mk-widget-container>
 </div>
 </template>
@@ -22,6 +22,9 @@ export default define({
 	})
 }).extend({
 	i18n: i18n('desktop/views/widgets/messaging.vue'),
+	components: {
+		XMessaging: () => import('../../../common/views/components/messaging.vue').then(m => m.default)
+	},
 	methods: {
 		navigate(user) {
 			this.$root.new(MkMessagingRoomWindow, {

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 {

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');

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);

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,

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,

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')}`;
 	},

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: []