[Client] Split some components to improve performance

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

@@ -27,9 +27,6 @@ import uploader from './uploader.vue';
 import streamIndicator from './stream-indicator.vue';
 import ellipsis from './ellipsis.vue';
 import urlPreview from './url-preview.vue';
-import twitterSetting from './twitter-setting.vue';
-import githubSetting from './github-setting.vue';
-import discordSetting from './discord-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
 import emoji from './emoji.vue';
 import welcomeTimeline from './welcome-timeline.vue';
@@ -73,9 +70,6 @@ Vue.component('mk-uploader', uploader);
 Vue.component('mk-stream-indicator', streamIndicator);
 Vue.component('mk-ellipsis', ellipsis);
 Vue.component('mk-url-preview', urlPreview);
-Vue.component('mk-twitter-setting', twitterSetting);
-Vue.component('mk-github-setting', githubSetting);
-Vue.component('mk-discord-setting', discordSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-emoji', emoji);
 Vue.component('mk-welcome-timeline', welcomeTimeline);

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

@@ -20,21 +20,21 @@
 			<ui-card>
 				<div slot="title"><fa :icon="['fab', 'twitter']"/> {{ $t('twitter') }}</div>
 				<section>
-					<mk-twitter-setting/>
+					<x-twitter-setting/>
 				</section>
 			</ui-card>
 
 			<ui-card>
 				<div slot="title"><fa :icon="['fab', 'github']"/> {{ $t('github') }}</div>
 				<section>
-					<mk-github-setting/>
+					<x-github-setting/>
 				</section>
 			</ui-card>
 
 			<ui-card>
 				<div slot="title"><fa :icon="['fab', 'discord']"/> {{ $t('discord') }}</div>
 				<section>
-					<mk-discord-setting/>
+					<x-discord-setting/>
 				</section>
 			</ui-card>
 		</div>
@@ -299,6 +299,16 @@ import X2fa from './settings.2fa.vue';
 import XApps from './settings.apps.vue';
 import XSignins from './settings.signins.vue';
 import XTags from './settings.tags.vue';
+import XTwitterSetting from '../../../common/views/components/twitter-setting.vue';
+import XGithubSetting from '../../../common/views/components/github-setting.vue';
+import XDiscordSetting from '../../../common/views/components/discord-setting.vue';
+import XTheme from '../../../common/views/components/theme.vue';
+import XDriveSettings from '../../../common/views/components/drive-settings.vue';
+import XMuteAndBlock from '../../../common/views/components/mute-and-block.vue';
+import XPasswordSettings from '../../../common/views/components/password-settings.vue';
+import XProfileEditor from '../../../common/views/components/profile-editor.vue';
+import XApiSettings from '../../../common/views/components/api-settings.vue';
+
 import { url, langs, clientVersion as version } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
 
@@ -309,12 +319,15 @@ export default Vue.extend({
 		XApps,
 		XSignins,
 		XTags,
-		XTheme: () => import('../../../common/views/components/theme.vue').then(m => m.default),
+		XTwitterSetting,
-		XDriveSettings: () => import('../../../common/views/components/drive-settings.vue').then(m => m.default),
+		XGithubSetting,
-		XMuteAndBlock: () => import('../../../common/views/components/mute-and-block.vue').then(m => m.default),
+		XDiscordSetting,
-		XPasswordSettings: () => import('../../../common/views/components/password-settings.vue').then(m => m.default),
+		XTheme,
-		XProfileEditor: () => import('../../../common/views/components/profile-editor.vue').then(m => m.default),
+		XDriveSettings,
-		XApiSettings: () => import('../../../common/views/components/api-settings.vue').then(m => m.default),
+		XMuteAndBlock,
+		XPasswordSettings,
+		XProfileEditor,
+		XApiSettings,
 	},
 	props: {
 		initialPage: {

src/client/app/mobile/views/pages/settings.vue

@@ -192,17 +192,23 @@ import Vue from 'vue';
 import i18n from '../../../i18n';
 import { apiUrl, clientVersion as version, codename, langs } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
+import XTheme from '../../../common/views/components/theme.vue';
+import XDriveSettings from '../../../common/views/components/drive-settings.vue';
+import XMuteAndBlock from '../../../common/views/components/mute-and-block.vue';
+import XPasswordSettings from '../../../common/views/components/password-settings.vue';
+import XProfileEditor from '../../../common/views/components/profile-editor.vue';
+import XApiSettings from '../../../common/views/components/api-settings.vue';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/settings.vue'),
 
 	components: {
-		XTheme: () => import('../../../common/views/components/theme.vue').then(m => m.default),
+		XTheme,
-		XDriveSettings: () => import('../../../common/views/components/drive-settings.vue').then(m => m.default),
+		XDriveSettings,
-		XMuteAndBlock: () => import('../../../common/views/components/mute-and-block.vue').then(m => m.default),
+		XMuteAndBlock,
-		XPasswordSettings: () => import('../../../common/views/components/password-settings.vue').then(m => m.default),
+		XPasswordSettings,
-		XProfileEditor: () => import('../../../common/views/components/profile-editor.vue').then(m => m.default),
+		XProfileEditor,
-		XApiSettings: () => import('../../../common/views/components/api-settings.vue').then(m => m.default),
+		XApiSettings,
 	},
 
 	data() {