[Client] Split components to reduce bundle size

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 notePreview from './note-preview.vue';
 import noteDetail from './note-detail.vue';
-import settings from './settings.vue';
 import calendar from './calendar.vue';
 import activity from './activity.vue';
 import friendsMaker from './friends-maker.vue';
@@ -40,7 +39,6 @@ Vue.component('mk-post-form', noteForm);
 Vue.component('mk-renote-form', renoteForm);
 Vue.component('mk-note-preview', notePreview);
 Vue.component('mk-note-detail', noteDetail);
-Vue.component('mk-settings', settings);
 Vue.component('mk-calendar', calendar);
 Vue.component('mk-activity', activity);
 Vue.component('mk-friends-maker', friendsMaker);

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

 <template>
 <mk-window ref="window" is-modal width="700px" height="550px" @closed="destroyDom">
 	<span slot="header" :class="$style.header"><fa icon="cog"/>{{ $t('settings') }}</span>
-	<mk-settings :initial-page="initialPage" @done="close"/>
+	<x-settings :initial-page="initialPage" @done="close"/>
 </mk-window>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
+
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/settings-window.vue'),
+
+	components: {
+		XSettings: () => import('./settings.vue').then(m => m.default)
+	},
+
 	props: {
 		initialPage: {
 			type: String,

src/client/app/mobile/script.ts

@@ -27,7 +27,6 @@ import MkFollowing from './views/pages/following.vue';
 import MkFavorites from './views/pages/favorites.vue';
 import MkUserLists from './views/pages/user-lists.vue';
 import MkUserList from './views/pages/user-list.vue';
-import MkSettings from './views/pages/settings.vue';
 import MkReversi from './views/pages/games/reversi.vue';
 import MkTag from './views/pages/tag.vue';
 import MkShare from './views/pages/share.vue';
@@ -137,7 +136,7 @@ init((launch) => {
 		routes: [
 			{ path: '/', name: 'index', component: MkIndex },
 			{ path: '/signup', name: 'signup', component: MkSignup },
-			{ path: '/i/settings', name: 'settings', component: MkSettings },
+			{ path: '/i/settings', name: 'settings', component: () => import('./views/pages/settings.vue').then(m => m.default) },
 			{ path: '/i/notifications', name: 'notifications', component: MkNotifications },
 			{ path: '/i/favorites', name: 'favorites', component: MkFavorites },
 			{ path: '/i/lists', name: 'user-lists', component: MkUserLists },