[Client] Split some components to improve performance

This commit is contained in:
syuilo 2018-11-15 22:04:12 +09:00
parent 6090630260
commit 4114ce4a04
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
3 changed files with 34 additions and 21 deletions

View file

@ -27,9 +27,6 @@ import uploader from './uploader.vue';
import streamIndicator from './stream-indicator.vue'; import streamIndicator from './stream-indicator.vue';
import ellipsis from './ellipsis.vue'; import ellipsis from './ellipsis.vue';
import urlPreview from './url-preview.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 fileTypeIcon from './file-type-icon.vue';
import emoji from './emoji.vue'; import emoji from './emoji.vue';
import welcomeTimeline from './welcome-timeline.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-stream-indicator', streamIndicator);
Vue.component('mk-ellipsis', ellipsis); Vue.component('mk-ellipsis', ellipsis);
Vue.component('mk-url-preview', urlPreview); 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-file-type-icon', fileTypeIcon);
Vue.component('mk-emoji', emoji); Vue.component('mk-emoji', emoji);
Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('mk-welcome-timeline', welcomeTimeline);

View file

@ -20,21 +20,21 @@
<ui-card> <ui-card>
<div slot="title"><fa :icon="['fab', 'twitter']"/> {{ $t('twitter') }}</div> <div slot="title"><fa :icon="['fab', 'twitter']"/> {{ $t('twitter') }}</div>
<section> <section>
<mk-twitter-setting/> <x-twitter-setting/>
</section> </section>
</ui-card> </ui-card>
<ui-card> <ui-card>
<div slot="title"><fa :icon="['fab', 'github']"/> {{ $t('github') }}</div> <div slot="title"><fa :icon="['fab', 'github']"/> {{ $t('github') }}</div>
<section> <section>
<mk-github-setting/> <x-github-setting/>
</section> </section>
</ui-card> </ui-card>
<ui-card> <ui-card>
<div slot="title"><fa :icon="['fab', 'discord']"/> {{ $t('discord') }}</div> <div slot="title"><fa :icon="['fab', 'discord']"/> {{ $t('discord') }}</div>
<section> <section>
<mk-discord-setting/> <x-discord-setting/>
</section> </section>
</ui-card> </ui-card>
</div> </div>
@ -299,6 +299,16 @@ import X2fa from './settings.2fa.vue';
import XApps from './settings.apps.vue'; import XApps from './settings.apps.vue';
import XSignins from './settings.signins.vue'; import XSignins from './settings.signins.vue';
import XTags from './settings.tags.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 { url, langs, clientVersion as version } from '../../../config';
import checkForUpdate from '../../../common/scripts/check-for-update'; import checkForUpdate from '../../../common/scripts/check-for-update';
@ -309,12 +319,15 @@ export default Vue.extend({
XApps, XApps,
XSignins, XSignins,
XTags, 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: { props: {
initialPage: { initialPage: {

View file

@ -192,17 +192,23 @@ import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import { apiUrl, clientVersion as version, codename, langs } from '../../../config'; import { apiUrl, clientVersion as version, codename, langs } from '../../../config';
import checkForUpdate from '../../../common/scripts/check-for-update'; 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({ export default Vue.extend({
i18n: i18n('mobile/views/pages/settings.vue'), i18n: i18n('mobile/views/pages/settings.vue'),
components: { 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() { data() {