[Client] Split some components to reduce bundle size

This commit is contained in:
syuilo 2018-11-12 05:35:09 +09:00
parent fab389e624
commit 33e79e4bb8
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
19 changed files with 63 additions and 29 deletions

View file

@ -32,8 +32,6 @@ import mediaList from './media-list.vue';
import uploader from './uploader.vue'; 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 messaging from './messaging.vue';
import messagingRoom from './messaging-room.vue';
import urlPreview from './url-preview.vue'; import urlPreview from './url-preview.vue';
import twitterSetting from './twitter-setting.vue'; import twitterSetting from './twitter-setting.vue';
import githubSetting from './github-setting.vue'; import githubSetting from './github-setting.vue';
@ -85,8 +83,6 @@ Vue.component('mk-media-list', mediaList);
Vue.component('mk-uploader', uploader); 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-messaging', messaging);
Vue.component('mk-messaging-room', messagingRoom);
Vue.component('mk-url-preview', urlPreview); Vue.component('mk-url-preview', urlPreview);
Vue.component('mk-twitter-setting', twitterSetting); Vue.component('mk-twitter-setting', twitterSetting);
Vue.component('mk-github-setting', githubSetting); Vue.component('mk-github-setting', githubSetting);

View file

@ -5,7 +5,7 @@
<span :class="$style.count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span> <span :class="$style.count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span>
</span> </span>
<mk-drive <x-drive
ref="browser" ref="browser"
:class="$style.browser" :class="$style.browser"
:multiple="multiple" :multiple="multiple"
@ -25,6 +25,9 @@ import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/choose-file-from-drive-window.vue'), i18n: i18n('desktop/views/components/choose-file-from-drive-window.vue'),
components: {
XDrive: () => import('./drive.vue').then(m => m.default),
},
props: { props: {
multiple: { multiple: {
default: false default: false

View file

@ -4,7 +4,7 @@
<span :class="$style.title">{{ $t('choose-prompt') }}</span> <span :class="$style.title">{{ $t('choose-prompt') }}</span>
</span> </span>
<mk-drive <x-drive
ref="browser" ref="browser"
:class="$style.browser" :class="$style.browser"
:multiple="false" :multiple="false"
@ -21,6 +21,9 @@ import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/choose-folder-from-drive-window.vue'), i18n: i18n('desktop/views/components/choose-folder-from-drive-window.vue'),
components: {
XDrive: () => import('./drive.vue').then(m => m.default),
},
methods: { methods: {
ok() { ok() {
this.$emit('selected', (this.$refs.browser as any).folder); this.$emit('selected', (this.$refs.browser as any).folder);

View file

@ -4,7 +4,7 @@
<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> {{ $t('used') }}</p> <p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> {{ $t('used') }}</p>
<span :class="$style.title"><fa icon="cloud"/>{{ $t('@.drive') }}</span> <span :class="$style.title"><fa icon="cloud"/>{{ $t('@.drive') }}</span>
</template> </template>
<mk-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/> <x-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/>
</mk-window> </mk-window>
</template> </template>
@ -15,6 +15,9 @@ import { url } from '../../../config';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/drive-window.vue'), i18n: i18n('desktop/views/components/drive-window.vue'),
components: {
XDrive: () => import('./drive.vue').then(m => m.default),
},
props: ['folder'], props: ['folder'],
data() { data() {
return { return {

View file

@ -16,7 +16,6 @@ import noteForm from './post-form.vue';
import renoteForm from './renote-form.vue'; import renoteForm from './renote-form.vue';
import followButton from './follow-button.vue'; import followButton from './follow-button.vue';
import notePreview from './note-preview.vue'; import notePreview from './note-preview.vue';
import drive from './drive.vue';
import noteDetail from './note-detail.vue'; import noteDetail from './note-detail.vue';
import settings from './settings.vue'; import settings from './settings.vue';
import calendar from './calendar.vue'; import calendar from './calendar.vue';
@ -42,7 +41,6 @@ Vue.component('mk-post-form', noteForm);
Vue.component('mk-renote-form', renoteForm); Vue.component('mk-renote-form', renoteForm);
Vue.component('mk-follow-button', followButton); Vue.component('mk-follow-button', followButton);
Vue.component('mk-note-preview', notePreview); Vue.component('mk-note-preview', notePreview);
Vue.component('mk-drive', drive);
Vue.component('mk-note-detail', noteDetail); Vue.component('mk-note-detail', noteDetail);
Vue.component('mk-settings', settings); Vue.component('mk-settings', settings);
Vue.component('mk-calendar', calendar); Vue.component('mk-calendar', calendar);

View file

@ -1,7 +1,7 @@
<template> <template>
<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom"> <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
<span slot="header" :class="$style.header"><fa icon="comments"/>{{ $t('title') }} {{ user | userName }}</span> <span slot="header" :class="$style.header"><fa icon="comments"/>{{ $t('title') }} {{ user | userName }}</span>
<mk-messaging-room :user="user" :class="$style.content"/> <x-messaging-room :user="user" :class="$style.content"/>
</mk-window> </mk-window>
</template> </template>
@ -13,6 +13,9 @@ import getAcct from '../../../../../misc/acct/render';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/messaging-room-window.vue'), i18n: i18n('desktop/views/components/messaging-room-window.vue'),
components: {
XMessagingRoom: () => import('../../../common/views/components/messaging-room.vue').then(m => m.default)
},
props: ['user'], props: ['user'],
computed: { computed: {
popout(): string { popout(): string {

View file

@ -1,7 +1,7 @@
<template> <template>
<mk-window ref="window" width="500px" height="560px" @closed="destroyDom"> <mk-window ref="window" width="500px" height="560px" @closed="destroyDom">
<span slot="header" :class="$style.header"><fa icon="comments"/>{{ $t('title') }}</span> <span slot="header" :class="$style.header"><fa icon="comments"/>{{ $t('title') }}</span>
<mk-messaging :class="$style.content" @navigate="navigate"/> <x-messaging :class="$style.content" @navigate="navigate"/>
</mk-window> </mk-window>
</template> </template>
@ -12,6 +12,9 @@ import MkMessagingRoomWindow from './messaging-room-window.vue';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/messaging-window.vue'), i18n: i18n('desktop/views/components/messaging-window.vue'),
components: {
XMessaging: () => import('../../../common/views/components/messaging.vue').then(m => m.default)
},
methods: { methods: {
navigate(user) { navigate(user) {
this.$root.new(MkMessagingRoomWindow, { this.$root.new(MkMessagingRoomWindow, {

View file

@ -25,9 +25,6 @@ import i18n from '../../../../i18n';
import XColumnCore from './deck.column-core.vue'; import XColumnCore from './deck.column-core.vue';
import Menu from '../../../../common/views/components/menu.vue'; import Menu from '../../../../common/views/components/menu.vue';
import MkUserListsWindow from '../../components/user-lists-window.vue'; import MkUserListsWindow from '../../components/user-lists-window.vue';
import XUserColumn from './deck.user-column.vue';
import XNoteColumn from './deck.note-column.vue';
import XHashtagColumn from './deck.hashtag-column.vue';
import * as uuid from 'uuid'; import * as uuid from 'uuid';
@ -35,9 +32,9 @@ export default Vue.extend({
i18n: i18n('deck'), i18n: i18n('deck'),
components: { components: {
XColumnCore, XColumnCore,
XUserColumn, XUserColumn: () => import('./deck.user-column.vue').then(m => m.default),
XNoteColumn, XNoteColumn: () => import('./deck.note-column.vue').then(m => m.default),
XHashtagColumn XHashtagColumn: () => import('./deck.hashtag-column.vue').then(m => m.default)
}, },
computed: { computed: {

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-drive-page"> <div class="mk-drive-page">
<mk-drive :init-folder="folder" @move-root="onMoveRoot" @open-folder="onOpenFolder"/> <x-drive :init-folder="folder" @move-root="onMoveRoot" @open-folder="onOpenFolder"/>
</div> </div>
</template> </template>
@ -10,6 +10,9 @@ import i18n from '../../../i18n';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/pages/drive.vue'), i18n: i18n('desktop/views/pages/drive.vue'),
components: {
XDrive: () => import('../components/drive.vue').then(m => m.default),
},
data() { data() {
return { return {
folder: null folder: null

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-messaging-room-page"> <div class="mk-messaging-room-page">
<mk-messaging-room v-if="user" :user="user" :is-naked="true"/> <x-messaging-room v-if="user" :user="user" :is-naked="true"/>
</div> </div>
</template> </template>
@ -13,6 +13,9 @@ import getUserName from '../../../../../misc/get-user-name';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('.vue'), i18n: i18n('.vue'),
components: {
XMessagingRoom: () => import('../../../common/views/components/messaging-room.vue').then(m => m.default)
},
data() { data() {
return { return {
fetching: true, fetching: true,

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="mkp-selectdrive"> <div class="mkp-selectdrive">
<mk-drive ref="browser" <x-drive ref="browser"
:multiple="multiple" :multiple="multiple"
@selected="onSelected" @selected="onSelected"
@change-selection="onChangeSelection" @change-selection="onChangeSelection"
@ -19,6 +19,9 @@ import i18n from '../../../i18n';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/pages/selectdrive.vue'), i18n: i18n('desktop/views/pages/selectdrive.vue'),
components: {
XDrive: () => import('../components/drive.vue').then(m => m.default),
},
data() { data() {
return { return {
files: [] files: []

View file

@ -4,7 +4,7 @@
<template slot="header"><fa icon="comments"/>{{ $t('title') }}</template> <template slot="header"><fa icon="comments"/>{{ $t('title') }}</template>
<button slot="func" @click="add"><fa icon="plus"/></button> <button slot="func" @click="add"><fa icon="plus"/></button>
<mk-messaging ref="index" compact @navigate="navigate"/> <x-messaging ref="index" compact @navigate="navigate"/>
</mk-widget-container> </mk-widget-container>
</div> </div>
</template> </template>
@ -22,6 +22,9 @@ export default define({
}) })
}).extend({ }).extend({
i18n: i18n('desktop/views/widgets/messaging.vue'), i18n: i18n('desktop/views/widgets/messaging.vue'),
components: {
XMessaging: () => import('../../../common/views/components/messaging.vue').then(m => m.default)
},
methods: { methods: {
navigate(user) { navigate(user) {
this.$root.new(MkMessagingRoomWindow, { this.$root.new(MkMessagingRoomWindow, {

View file

@ -6,7 +6,7 @@
<button class="close" @click="cancel"><fa icon="times"/></button> <button class="close" @click="cancel"><fa icon="times"/></button>
<button v-if="multiple" class="ok" @click="ok"><fa icon="check"/></button> <button v-if="multiple" class="ok" @click="ok"><fa icon="check"/></button>
</header> </header>
<mk-drive class="drive" ref="browser" <x-drive class="drive" ref="browser"
:select-file="true" :select-file="true"
:multiple="multiple" :multiple="multiple"
@change-selection="onChangeSelection" @change-selection="onChangeSelection"
@ -22,6 +22,9 @@ import i18n from '../../../i18n';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('mobile/views/components/drive-file-chooser.vue'), i18n: i18n('mobile/views/components/drive-file-chooser.vue'),
components: {
XDrive: () => import('./drive.vue').then(m => m.default),
},
props: ['multiple'], props: ['multiple'],
data() { data() {
return { return {

View file

@ -6,7 +6,7 @@
<button class="close" @click="cancel"><fa icon="times"/></button> <button class="close" @click="cancel"><fa icon="times"/></button>
<button class="ok" @click="ok"><fa icon="check"/></button> <button class="ok" @click="ok"><fa icon="check"/></button>
</header> </header>
<mk-drive ref="browser" <x-drive ref="browser"
select-folder select-folder
/> />
</div> </div>
@ -18,6 +18,9 @@ import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('mobile/views/components/drive-folder-chooser.vue'), i18n: i18n('mobile/views/components/drive-folder-chooser.vue'),
components: {
XDrive: () => import('./drive.vue').then(m => m.default),
},
methods: { methods: {
cancel() { cancel() {
this.$emit('canceled'); this.$emit('canceled');

View file

@ -5,7 +5,6 @@ import note from './note.vue';
import notes from './notes.vue'; import notes from './notes.vue';
import mediaImage from './media-image.vue'; import mediaImage from './media-image.vue';
import mediaVideo from './media-video.vue'; import mediaVideo from './media-video.vue';
import drive from './drive.vue';
import notePreview from './note-preview.vue'; import notePreview from './note-preview.vue';
import subNoteContent from './sub-note-content.vue'; import subNoteContent from './sub-note-content.vue';
import noteCard from './note-card.vue'; import noteCard from './note-card.vue';
@ -29,7 +28,6 @@ Vue.component('mk-note', note);
Vue.component('mk-notes', notes); Vue.component('mk-notes', notes);
Vue.component('mk-media-image', mediaImage); Vue.component('mk-media-image', mediaImage);
Vue.component('mk-media-video', mediaVideo); Vue.component('mk-media-video', mediaVideo);
Vue.component('mk-drive', drive);
Vue.component('mk-note-preview', notePreview); Vue.component('mk-note-preview', notePreview);
Vue.component('mk-sub-note-content', subNoteContent); Vue.component('mk-sub-note-content', subNoteContent);
Vue.component('mk-note-card', noteCard); Vue.component('mk-note-card', noteCard);

View file

@ -6,7 +6,7 @@
<template v-if="!folder && !file"><span style="margin-right:4px;"><fa icon="cloud"/></span>{{ $t('@.drive') }}</template> <template v-if="!folder && !file"><span style="margin-right:4px;"><fa icon="cloud"/></span>{{ $t('@.drive') }}</template>
</span> </span>
<template slot="func"><button @click="fn"><fa icon="ellipsis-h"/></button></template> <template slot="func"><button @click="fn"><fa icon="ellipsis-h"/></button></template>
<mk-drive <x-drive
ref="browser" ref="browser"
:init-folder="initFolder" :init-folder="initFolder"
:init-file="initFile" :init-file="initFile"
@ -29,6 +29,9 @@ import Progress from '../../../common/scripts/loading';
export default Vue.extend({ export default Vue.extend({
i18n: i18n(), i18n: i18n(),
components: {
XDrive: () => import('../components/drive.vue').then(m => m.default),
},
data() { data() {
return { return {
Progress, Progress,

View file

@ -4,7 +4,7 @@
<template v-if="user"><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span>{{ user | userName }}</template> <template v-if="user"><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span>{{ user | userName }}</template>
<template v-else><mk-ellipsis/></template> <template v-else><mk-ellipsis/></template>
</span> </span>
<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/> <x-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>
</mk-ui> </mk-ui>
</template> </template>
@ -15,6 +15,9 @@ import parseAcct from '../../../../../misc/acct/parse';
export default Vue.extend({ export default Vue.extend({
i18n: i18n(), i18n: i18n(),
components: {
XMessagingRoom: () => import('../../../common/views/components/messaging-room.vue').then(m => m.default)
},
data() { data() {
return { return {
fetching: true, fetching: true,

View file

@ -1,7 +1,7 @@
<template> <template>
<mk-ui> <mk-ui>
<span slot="header"><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span>{{ $t('@.messaging') }}</span> <span slot="header"><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span>{{ $t('@.messaging') }}</span>
<mk-messaging @navigate="navigate" :header-top="48"/> <x-messaging @navigate="navigate" :header-top="48"/>
</mk-ui> </mk-ui>
</template> </template>
@ -12,6 +12,9 @@ import getAcct from '../../../../../misc/acct/render';
export default Vue.extend({ export default Vue.extend({
i18n: i18n(), i18n: i18n(),
components: {
XMessaging: () => import('../../../common/views/components/messaging.vue').then(m => m.default)
},
mounted() { mounted() {
document.title = `${this.$root.instanceName} ${this.$t('@.messaging')}`; document.title = `${this.$root.instanceName} ${this.$t('@.messaging')}`;
}, },

View file

@ -5,7 +5,7 @@
<button class="upload" @click="upload"><fa icon="upload"/></button> <button class="upload" @click="upload"><fa icon="upload"/></button>
<button v-if="multiple" class="ok" @click="ok"><fa icon="check"/></button> <button v-if="multiple" class="ok" @click="ok"><fa icon="check"/></button>
</header> </header>
<mk-drive ref="browser" select-file :multiple="multiple" is-naked :top="$store.state.uiHeaderHeight"/> <x-drive ref="browser" select-file :multiple="multiple" is-naked :top="$store.state.uiHeaderHeight"/>
</div> </div>
</template> </template>
@ -15,6 +15,9 @@ import i18n from '../../../i18n';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('mobile/views/pages/selectdrive.vue'), i18n: i18n('mobile/views/pages/selectdrive.vue'),
components: {
XDrive: () => import('../components/drive.vue').then(m => m.default),
},
data() { data() {
return { return {
files: [] files: []