[Client] Split some components to improve performance
This commit is contained in:
		
							parent
							
								
									6090630260
								
							
						
					
					
						commit
						4114ce4a04
					
				
					 3 changed files with 34 additions and 21 deletions
				
			
		| 
						 | 
					@ -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);
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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: {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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() {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue