Reduce initial bundle size

src/client/app/common/views/pages/share.vue

@@ -3,7 +3,7 @@
 	<h1>{{ $t('share-with', { name }) }}</h1>
 	<div>
 		<mk-signin v-if="!$store.getters.isSignedIn"/>
-		<mk-post-form v-else-if="!posted" :initial-text="template" :instant="true" @posted="posted = true"/>
+		<x-post-form v-else-if="!posted" :initial-text="template" :instant="true" @posted="posted = true"/>
 		<p v-if="posted" class="posted"><fa icon="check"/></p>
 	</div>
 	<ui-button class="close" v-if="posted" @click="close">{{ $t('@.close') }}</ui-button>
@@ -16,6 +16,9 @@ import i18n from '../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/share.vue'),
+	components: {
+		XPostForm: () => import('../../../desktop/views/components/post-form.vue').then(m => m.default)
+	},
 	data() {
 		return {
 			name: null,
@@ -35,15 +38,15 @@ export default Vue.extend({
 			return t.trim();
 		}
 	},
-	methods: {
-		close() {
-			window.close();
-		}
-	},
 	mounted() {
 		this.$root.getMeta().then(meta => {
 			this.name = meta.name || 'Misskey';
 		});
+	},
+	methods: {
+		close() {
+			window.close();
+		}
 	}
 });
 </script>

src/client/app/common/views/widgets/post-form.vue

@@ -38,7 +38,6 @@
 import define from '../../../common/define-widget';
 import i18n from '../../../i18n';
 import insertTextAtCursor from 'insert-text-at-cursor';
-import XPostFormAttaches from '../components/post-form-attaches.vue';
 
 export default define({
 	name: 'post-form',
@@ -49,7 +48,7 @@ export default define({
 	i18n: i18n('desktop/views/widgets/post-form.vue'),
 
 	components: {
-		XPostFormAttaches
+		XPostFormAttaches: () => import('../components/post-form-attaches.vue').then(m => m.default)
 	},
 
 	data() {

src/client/app/desktop/script.ts

@@ -13,7 +13,6 @@ import fuckAdBlock from '../common/scripts/fuck-ad-block';
 import composeNotification from '../common/scripts/compose-notification';
 
 import MkHome from './views/home/home.vue';
-import MkDeck from '../common/views/deck/deck.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
@@ -25,7 +24,6 @@ import MkSettings from './views/pages/settings.vue';
 import DeckColumn from '../common/views/deck/deck.column-template.vue';
 
 import Ctx from './views/components/context-menu.vue';
-import PostFormWindow from './views/components/post-form-window.vue';
 import RenoteFormWindow from './views/components/renote-form-window.vue';
 import MkChooseFileFromDriveWindow from './views/components/choose-file-from-drive-window.vue';
 import MkChooseFolderFromDriveWindow from './views/components/choose-folder-from-drive-window.vue';
@@ -62,12 +60,13 @@ init(async (launch, os) => {
 					});
 					if (o.cb) vm.$once('closed', o.cb);
 				} else {
-					const vm = this.$root.new(PostFormWindow, {
+					this.$root.new(() => import('./views/components/post-form-window.vue').then(m => m.default), {
 						reply: o.reply,
 						mention: o.mention,
 						animation: o.animation == null ? true : o.animation
+					}).then(vm => {
+						if (o.cb) vm.$once('closed', o.cb);
 					});
-					if (o.cb) vm.$once('closed', o.cb);
 				}
 			},
 
@@ -129,7 +128,7 @@ init(async (launch, os) => {
 		mode: 'history',
 		routes: [
 			os.store.state.device.inDeckMode
-				? { path: '/', name: 'index', component: MkDeck, children: [
+				? { path: '/', name: 'index', component: () => import('../common/views/deck/deck.vue').then(m => m.default), children: [
 					{ path: '/@:user', component: () => import('../common/views/deck/deck.user-column.vue').then(m => m.default), children: [
 						{ path: '', name: 'user', component: () => import('../common/views/deck/deck.user-column.home.vue').then(m => m.default) },
 						{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },

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

@@ -6,11 +6,9 @@ import note from './note.vue';
 import notes from './notes.vue';
 import subNoteContent from './sub-note-content.vue';
 import window from './window.vue';
-import noteFormWindow from './post-form-window.vue';
 import renoteFormWindow from './renote-form-window.vue';
 import mediaVideo from './media-video.vue';
 import notifications from './notifications.vue';
-import noteForm from './post-form.vue';
 import renoteForm from './renote-form.vue';
 import notePreview from './note-preview.vue';
 import noteDetail from './note-detail.vue';
@@ -25,11 +23,9 @@ Vue.component('mk-note', note);
 Vue.component('mk-notes', notes);
 Vue.component('mk-sub-note-content', subNoteContent);
 Vue.component('mk-window', window);
-Vue.component('mk-post-form-window', noteFormWindow);
 Vue.component('mk-renote-form-window', renoteFormWindow);
 Vue.component('mk-media-video', mediaVideo);
 Vue.component('mk-notifications', notifications);
-Vue.component('mk-post-form', noteForm);
 Vue.component('mk-renote-form', renoteForm);
 Vue.component('mk-note-preview', notePreview);
 Vue.component('mk-note-detail', noteDetail);

src/client/app/desktop/views/components/post-form-window.vue

@@ -12,7 +12,7 @@
 
 	<div class="mk-post-form-window--body">
 		<mk-note-preview v-if="reply" class="notePreview" :note="reply"/>
-		<mk-post-form ref="form"
+		<x-post-form ref="form"
 			:reply="reply"
 			:mention="mention"
 			@posted="onPosted"
@@ -27,9 +27,15 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
+import XPostForm from './post-form.vue';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/post-form-window.vue'),
+
+	components: {
+		XPostForm
+	},
+
 	props: {
 		reply: {
 			type: Object,

src/client/app/desktop/views/components/post-form.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-post-form"
+<div class="gjisdzwh"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
@@ -519,7 +519,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-post-form
+.gjisdzwh
 	display block
 	padding 16px
 	background var(--desktopPostFormBg)

src/client/app/desktop/views/components/renote-form.vue

@@ -10,7 +10,7 @@
 		</footer>
 	</template>
 	<template v-if="quote">
-		<mk-post-form ref="form" :renote="note" @posted="onChildFormPosted"/>
+		<x-post-form ref="form" :renote="note" @posted="onChildFormPosted"/>
 	</template>
 </div>
 </template>
@@ -22,6 +22,10 @@ import i18n from '../../../i18n';
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/renote-form.vue'),
 
+	components: {
+		XPostForm: () => import('./post-form.vue').then(m => m.default)
+	},
+
 	props: {
 		note: {
 			type: Object,

src/client/app/desktop/views/home/timeline.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="pwbzawku">
-	<mk-post-form class="form" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
+	<x-post-form class="form" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
 	<div class="main">
 		<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
 			<header class="zahtxcqi">
@@ -31,8 +31,10 @@ import MkSettingsWindow from '../components/settings-window.vue';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/timeline.vue'),
+
 	components: {
-		XCore
+		XCore,
+		XPostForm: () => import('../components/post-form.vue').then(m => m.default)
 	},
 
 	data() {

src/client/app/init.ts

@@ -449,12 +449,25 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
 					getMetaSync: os.getMetaSync,
 					signout: os.signout,
 					new(vm, props) {
-						const x = new vm({
+						if (typeof vm === 'function') {
-							parent: this,
+							return new Promise((res) => {
-							propsData: props
+								vm().then(vm => {
-						}).$mount();
+									const x = new vm({
-						document.body.appendChild(x.$el);
+										parent: this,
-						return x;
+										propsData: props
+									}).$mount();
+									document.body.appendChild(x.$el);
+									res(x);
+								});
+							});
+						} else {
+							const x = new vm({
+								parent: this,
+								propsData: props
+							}).$mount();
+							document.body.appendChild(x.$el);
+							return x;
+						}
 					},
 					dialog(opts) {
 						const vm = this.new(Dialog, opts);

src/client/app/mobile/script.ts

@@ -11,16 +11,13 @@ import './style.styl';
 import init from '../init';
 
 import MkIndex from './views/pages/index.vue';
-import MkDeck from '../common/views/deck/deck.vue';
 import MkSignup from './views/pages/signup.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
-import MkWidgets from './views/pages/widgets.vue';
 import MkMessaging from './views/pages/messaging.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
 import MkSearch from './views/pages/search.vue';
-import MkFavorites from './views/pages/favorites.vue';
 import UI from './views/pages/ui.vue';
 import MkReversi from './views/pages/games/reversi.vue';
 import MkTag from './views/pages/tag.vue';
@@ -29,7 +26,6 @@ import MkFollow from '../common/views/pages/follow.vue';
 import MkNotFound from '../common/views/pages/not-found.vue';
 import DeckColumn from '../common/views/deck/deck.column-template.vue';
 
-import PostForm from './views/components/post-form-dialog.vue';
 import FileChooser from './views/components/drive-file-chooser.vue';
 import FolderChooser from './views/components/drive-folder-chooser.vue';
 
@@ -54,16 +50,16 @@ init((launch, os) => {
 					document.documentElement.style.overflow = 'auto';
 				}
 
-				const vm = this.$root.new(PostForm, {
+				this.$root.new(() => import('./views/components/post-form-dialog.vue').then(m => m.default), {
 					reply: o.reply,
 					mention: o.mention,
 					renote: o.renote
+				}).then(vm => {
+					vm.$once('cancel', recover);
+					vm.$once('posted', recover);
+					if (o.cb) vm.$once('closed', o.cb);
+					(vm as any).focus();
 				});
-
-				vm.$once('cancel', recover);
-				vm.$once('posted', recover);
-				if (o.cb) vm.$once('closed', o.cb);
-				(vm as any).focus();
 			},
 
 			$chooseDriveFile(opts) {
@@ -114,7 +110,7 @@ init((launch, os) => {
 		mode: 'history',
 		routes: [
 			...(os.store.state.device.inDeckMode
-				? [{ path: '/', name: 'index', component: MkDeck, children: [
+				? [{ path: '/', name: 'index', component: () => import('../common/views/deck/deck.vue').then(m => m.default), children: [
 					{ path: '/@:user', component: () => import('../common/views/deck/deck.user-column.vue').then(m => m.default), children: [
 						{ path: '', name: 'user', component: () => import('../common/views/deck/deck.user-column.home.vue').then(m => m.default) },
 						{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },
@@ -145,7 +141,7 @@ init((launch, os) => {
 			{ path: '/i/groups', name: 'user-groups', component: UI, props: route => ({ component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) }) },
 			{ path: '/i/groups/:group', component: UI, props: route => ({ component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default), groupId: route.params.group }) },
 			{ path: '/i/follow-requests', name: 'follow-requests', component: UI, props: route => ({ component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) }) },
-			{ path: '/i/widgets', name: 'widgets', component: MkWidgets },
+			{ path: '/i/widgets', name: 'widgets', component: () => import('./views/pages/widgets.vue').then(m => m.default) },
 			{ path: '/i/messaging', name: 'messaging', component: MkMessaging },
 			{ path: '/i/messaging/group/:group', component: MkMessagingRoom },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },

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

@@ -14,7 +14,6 @@ import notificationPreview from './notification-preview.vue';
 import userTimeline from './user-timeline.vue';
 import userListTimeline from './user-list-timeline.vue';
 import uiContainer from './ui-container.vue';
-import postForm from './post-form.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-note', note);
@@ -30,4 +29,3 @@ Vue.component('mk-notification-preview', notificationPreview);
 Vue.component('mk-user-timeline', userTimeline);
 Vue.component('mk-user-list-timeline', userListTimeline);
 Vue.component('ui-container', uiContainer);
-Vue.component('mk-post-form', postForm);

src/client/app/mobile/views/components/post-form-dialog.vue

@@ -2,7 +2,7 @@
 <div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
 	<div class="bg" ref="bg"></div>
 	<div class="main" ref="main">
-		<mk-post-form ref="form"
+		<x-post-form ref="form"
 			:reply="reply"
 			:renote="renote"
 			:mention="mention"
@@ -17,8 +17,13 @@
 <script lang="ts">
 import Vue from 'vue';
 import anime from 'animejs';
+import XPostForm from './post-form.vue';
 
 export default Vue.extend({
+	components: {
+		XPostForm
+	},
+
 	props: {
 		reply: {
 			type: Object,

src/client/app/mobile/views/components/post-form.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-post-form">
+<div class="gafaadew">
 	<div class="form">
 		<header>
 			<button class="cancel" @click="cancel"><fa icon="times"/></button>
@@ -387,7 +387,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-post-form
+.gafaadew
 	max-width 500px
 	width calc(100% - 16px)
 	margin 8px auto