Reduce initial bundle size

This commit is contained in:
syuilo 2019-05-21 04:21:43 +09:00
parent 3cc2049fb3
commit cd4c7689b7
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
13 changed files with 67 additions and 46 deletions

View File

@ -3,7 +3,7 @@
<h1>{{ $t('share-with', { name }) }}</h1> <h1>{{ $t('share-with', { name }) }}</h1>
<div> <div>
<mk-signin v-if="!$store.getters.isSignedIn"/> <mk-signin v-if="!$store.getters.isSignedIn"/>
<mk-post-form v-else-if="!posted" :initial-text="template" :instant="true" @posted="posted = true"/> <x-post-form v-else-if="!posted" :initial-text="template" :instant="true" @posted="posted = true"/>
<p v-if="posted" class="posted"><fa icon="check"/></p> <p v-if="posted" class="posted"><fa icon="check"/></p>
</div> </div>
<ui-button class="close" v-if="posted" @click="close">{{ $t('@.close') }}</ui-button> <ui-button class="close" v-if="posted" @click="close">{{ $t('@.close') }}</ui-button>
@ -16,6 +16,9 @@ import i18n from '../../../i18n';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('mobile/views/pages/share.vue'), i18n: i18n('mobile/views/pages/share.vue'),
components: {
XPostForm: () => import('../../../desktop/views/components/post-form.vue').then(m => m.default)
},
data() { data() {
return { return {
name: null, name: null,
@ -35,15 +38,15 @@ export default Vue.extend({
return t.trim(); return t.trim();
} }
}, },
methods: {
close() {
window.close();
}
},
mounted() { mounted() {
this.$root.getMeta().then(meta => { this.$root.getMeta().then(meta => {
this.name = meta.name || 'Misskey'; this.name = meta.name || 'Misskey';
}); });
},
methods: {
close() {
window.close();
}
} }
}); });
</script> </script>

View File

@ -38,7 +38,6 @@
import define from '../../../common/define-widget'; import define from '../../../common/define-widget';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import insertTextAtCursor from 'insert-text-at-cursor'; import insertTextAtCursor from 'insert-text-at-cursor';
import XPostFormAttaches from '../components/post-form-attaches.vue';
export default define({ export default define({
name: 'post-form', name: 'post-form',
@ -49,7 +48,7 @@ export default define({
i18n: i18n('desktop/views/widgets/post-form.vue'), i18n: i18n('desktop/views/widgets/post-form.vue'),
components: { components: {
XPostFormAttaches XPostFormAttaches: () => import('../components/post-form-attaches.vue').then(m => m.default)
}, },
data() { data() {

View File

@ -13,7 +13,6 @@ import fuckAdBlock from '../common/scripts/fuck-ad-block';
import composeNotification from '../common/scripts/compose-notification'; import composeNotification from '../common/scripts/compose-notification';
import MkHome from './views/home/home.vue'; import MkHome from './views/home/home.vue';
import MkDeck from '../common/views/deck/deck.vue';
import MkSelectDrive from './views/pages/selectdrive.vue'; import MkSelectDrive from './views/pages/selectdrive.vue';
import MkDrive from './views/pages/drive.vue'; import MkDrive from './views/pages/drive.vue';
import MkMessagingRoom from './views/pages/messaging-room.vue'; import MkMessagingRoom from './views/pages/messaging-room.vue';
@ -25,7 +24,6 @@ import MkSettings from './views/pages/settings.vue';
import DeckColumn from '../common/views/deck/deck.column-template.vue'; import DeckColumn from '../common/views/deck/deck.column-template.vue';
import Ctx from './views/components/context-menu.vue'; import Ctx from './views/components/context-menu.vue';
import PostFormWindow from './views/components/post-form-window.vue';
import RenoteFormWindow from './views/components/renote-form-window.vue'; import RenoteFormWindow from './views/components/renote-form-window.vue';
import MkChooseFileFromDriveWindow from './views/components/choose-file-from-drive-window.vue'; import MkChooseFileFromDriveWindow from './views/components/choose-file-from-drive-window.vue';
import MkChooseFolderFromDriveWindow from './views/components/choose-folder-from-drive-window.vue'; import MkChooseFolderFromDriveWindow from './views/components/choose-folder-from-drive-window.vue';
@ -62,12 +60,13 @@ init(async (launch, os) => {
}); });
if (o.cb) vm.$once('closed', o.cb); if (o.cb) vm.$once('closed', o.cb);
} else { } else {
const vm = this.$root.new(PostFormWindow, { this.$root.new(() => import('./views/components/post-form-window.vue').then(m => m.default), {
reply: o.reply, reply: o.reply,
mention: o.mention, mention: o.mention,
animation: o.animation == null ? true : o.animation animation: o.animation == null ? true : o.animation
}); }).then(vm => {
if (o.cb) vm.$once('closed', o.cb); if (o.cb) vm.$once('closed', o.cb);
});
} }
}, },
@ -129,7 +128,7 @@ init(async (launch, os) => {
mode: 'history', mode: 'history',
routes: [ routes: [
os.store.state.device.inDeckMode os.store.state.device.inDeckMode
? { path: '/', name: 'index', component: MkDeck, children: [ ? { path: '/', name: 'index', component: () => import('../common/views/deck/deck.vue').then(m => m.default), children: [
{ path: '/@:user', component: () => import('../common/views/deck/deck.user-column.vue').then(m => m.default), children: [ { path: '/@:user', component: () => import('../common/views/deck/deck.user-column.vue').then(m => m.default), children: [
{ path: '', name: 'user', component: () => import('../common/views/deck/deck.user-column.home.vue').then(m => m.default) }, { path: '', name: 'user', component: () => import('../common/views/deck/deck.user-column.home.vue').then(m => m.default) },
{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) }, { path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },

View File

@ -6,11 +6,9 @@ import note from './note.vue';
import notes from './notes.vue'; import notes from './notes.vue';
import subNoteContent from './sub-note-content.vue'; import subNoteContent from './sub-note-content.vue';
import window from './window.vue'; import window from './window.vue';
import noteFormWindow from './post-form-window.vue';
import renoteFormWindow from './renote-form-window.vue'; import renoteFormWindow from './renote-form-window.vue';
import mediaVideo from './media-video.vue'; import mediaVideo from './media-video.vue';
import notifications from './notifications.vue'; import notifications from './notifications.vue';
import noteForm from './post-form.vue';
import renoteForm from './renote-form.vue'; import renoteForm from './renote-form.vue';
import notePreview from './note-preview.vue'; import notePreview from './note-preview.vue';
import noteDetail from './note-detail.vue'; import noteDetail from './note-detail.vue';
@ -25,11 +23,9 @@ Vue.component('mk-note', note);
Vue.component('mk-notes', notes); Vue.component('mk-notes', notes);
Vue.component('mk-sub-note-content', subNoteContent); Vue.component('mk-sub-note-content', subNoteContent);
Vue.component('mk-window', window); Vue.component('mk-window', window);
Vue.component('mk-post-form-window', noteFormWindow);
Vue.component('mk-renote-form-window', renoteFormWindow); Vue.component('mk-renote-form-window', renoteFormWindow);
Vue.component('mk-media-video', mediaVideo); Vue.component('mk-media-video', mediaVideo);
Vue.component('mk-notifications', notifications); Vue.component('mk-notifications', notifications);
Vue.component('mk-post-form', noteForm);
Vue.component('mk-renote-form', renoteForm); Vue.component('mk-renote-form', renoteForm);
Vue.component('mk-note-preview', notePreview); Vue.component('mk-note-preview', notePreview);
Vue.component('mk-note-detail', noteDetail); Vue.component('mk-note-detail', noteDetail);

View File

@ -12,7 +12,7 @@
<div class="mk-post-form-window--body"> <div class="mk-post-form-window--body">
<mk-note-preview v-if="reply" class="notePreview" :note="reply"/> <mk-note-preview v-if="reply" class="notePreview" :note="reply"/>
<mk-post-form ref="form" <x-post-form ref="form"
:reply="reply" :reply="reply"
:mention="mention" :mention="mention"
@posted="onPosted" @posted="onPosted"
@ -27,9 +27,15 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import XPostForm from './post-form.vue';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/post-form-window.vue'), i18n: i18n('desktop/views/components/post-form-window.vue'),
components: {
XPostForm
},
props: { props: {
reply: { reply: {
type: Object, type: Object,

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-post-form" <div class="gjisdzwh"
@dragover.stop="onDragover" @dragover.stop="onDragover"
@dragenter="onDragenter" @dragenter="onDragenter"
@dragleave="onDragleave" @dragleave="onDragleave"
@ -519,7 +519,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-post-form .gjisdzwh
display block display block
padding 16px padding 16px
background var(--desktopPostFormBg) background var(--desktopPostFormBg)

View File

@ -10,7 +10,7 @@
</footer> </footer>
</template> </template>
<template v-if="quote"> <template v-if="quote">
<mk-post-form ref="form" :renote="note" @posted="onChildFormPosted"/> <x-post-form ref="form" :renote="note" @posted="onChildFormPosted"/>
</template> </template>
</div> </div>
</template> </template>
@ -22,6 +22,10 @@ import i18n from '../../../i18n';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/renote-form.vue'), i18n: i18n('desktop/views/components/renote-form.vue'),
components: {
XPostForm: () => import('./post-form.vue').then(m => m.default)
},
props: { props: {
note: { note: {
type: Object, type: Object,

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="pwbzawku"> <div class="pwbzawku">
<mk-post-form class="form" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }" v-if="$store.state.settings.showPostFormOnTopOfTl"/> <x-post-form class="form" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
<div class="main"> <div class="main">
<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options"> <component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
<header class="zahtxcqi"> <header class="zahtxcqi">
@ -31,8 +31,10 @@ import MkSettingsWindow from '../components/settings-window.vue';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/timeline.vue'), i18n: i18n('desktop/views/components/timeline.vue'),
components: { components: {
XCore XCore,
XPostForm: () => import('../components/post-form.vue').then(m => m.default)
}, },
data() { data() {

View File

@ -449,12 +449,25 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
getMetaSync: os.getMetaSync, getMetaSync: os.getMetaSync,
signout: os.signout, signout: os.signout,
new(vm, props) { new(vm, props) {
if (typeof vm === 'function') {
return new Promise((res) => {
vm().then(vm => {
const x = new vm({
parent: this,
propsData: props
}).$mount();
document.body.appendChild(x.$el);
res(x);
});
});
} else {
const x = new vm({ const x = new vm({
parent: this, parent: this,
propsData: props propsData: props
}).$mount(); }).$mount();
document.body.appendChild(x.$el); document.body.appendChild(x.$el);
return x; return x;
}
}, },
dialog(opts) { dialog(opts) {
const vm = this.new(Dialog, opts); const vm = this.new(Dialog, opts);

View File

@ -11,16 +11,13 @@ import './style.styl';
import init from '../init'; import init from '../init';
import MkIndex from './views/pages/index.vue'; import MkIndex from './views/pages/index.vue';
import MkDeck from '../common/views/deck/deck.vue';
import MkSignup from './views/pages/signup.vue'; import MkSignup from './views/pages/signup.vue';
import MkSelectDrive from './views/pages/selectdrive.vue'; import MkSelectDrive from './views/pages/selectdrive.vue';
import MkDrive from './views/pages/drive.vue'; import MkDrive from './views/pages/drive.vue';
import MkWidgets from './views/pages/widgets.vue';
import MkMessaging from './views/pages/messaging.vue'; import MkMessaging from './views/pages/messaging.vue';
import MkMessagingRoom from './views/pages/messaging-room.vue'; import MkMessagingRoom from './views/pages/messaging-room.vue';
import MkNote from './views/pages/note.vue'; import MkNote from './views/pages/note.vue';
import MkSearch from './views/pages/search.vue'; import MkSearch from './views/pages/search.vue';
import MkFavorites from './views/pages/favorites.vue';
import UI from './views/pages/ui.vue'; import UI from './views/pages/ui.vue';
import MkReversi from './views/pages/games/reversi.vue'; import MkReversi from './views/pages/games/reversi.vue';
import MkTag from './views/pages/tag.vue'; import MkTag from './views/pages/tag.vue';
@ -29,7 +26,6 @@ import MkFollow from '../common/views/pages/follow.vue';
import MkNotFound from '../common/views/pages/not-found.vue'; import MkNotFound from '../common/views/pages/not-found.vue';
import DeckColumn from '../common/views/deck/deck.column-template.vue'; import DeckColumn from '../common/views/deck/deck.column-template.vue';
import PostForm from './views/components/post-form-dialog.vue';
import FileChooser from './views/components/drive-file-chooser.vue'; import FileChooser from './views/components/drive-file-chooser.vue';
import FolderChooser from './views/components/drive-folder-chooser.vue'; import FolderChooser from './views/components/drive-folder-chooser.vue';
@ -54,16 +50,16 @@ init((launch, os) => {
document.documentElement.style.overflow = 'auto'; document.documentElement.style.overflow = 'auto';
} }
const vm = this.$root.new(PostForm, { this.$root.new(() => import('./views/components/post-form-dialog.vue').then(m => m.default), {
reply: o.reply, reply: o.reply,
mention: o.mention, mention: o.mention,
renote: o.renote renote: o.renote
}); }).then(vm => {
vm.$once('cancel', recover); vm.$once('cancel', recover);
vm.$once('posted', recover); vm.$once('posted', recover);
if (o.cb) vm.$once('closed', o.cb); if (o.cb) vm.$once('closed', o.cb);
(vm as any).focus(); (vm as any).focus();
});
}, },
$chooseDriveFile(opts) { $chooseDriveFile(opts) {
@ -114,7 +110,7 @@ init((launch, os) => {
mode: 'history', mode: 'history',
routes: [ routes: [
...(os.store.state.device.inDeckMode ...(os.store.state.device.inDeckMode
? [{ path: '/', name: 'index', component: MkDeck, children: [ ? [{ path: '/', name: 'index', component: () => import('../common/views/deck/deck.vue').then(m => m.default), children: [
{ path: '/@:user', component: () => import('../common/views/deck/deck.user-column.vue').then(m => m.default), children: [ { path: '/@:user', component: () => import('../common/views/deck/deck.user-column.vue').then(m => m.default), children: [
{ path: '', name: 'user', component: () => import('../common/views/deck/deck.user-column.home.vue').then(m => m.default) }, { path: '', name: 'user', component: () => import('../common/views/deck/deck.user-column.home.vue').then(m => m.default) },
{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) }, { path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },
@ -145,7 +141,7 @@ init((launch, os) => {
{ path: '/i/groups', name: 'user-groups', component: UI, props: route => ({ component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) }) }, { path: '/i/groups', name: 'user-groups', component: UI, props: route => ({ component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) }) },
{ path: '/i/groups/:group', component: UI, props: route => ({ component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default), groupId: route.params.group }) }, { path: '/i/groups/:group', component: UI, props: route => ({ component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default), groupId: route.params.group }) },
{ path: '/i/follow-requests', name: 'follow-requests', component: UI, props: route => ({ component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) }) }, { path: '/i/follow-requests', name: 'follow-requests', component: UI, props: route => ({ component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) }) },
{ path: '/i/widgets', name: 'widgets', component: MkWidgets }, { path: '/i/widgets', name: 'widgets', component: () => import('./views/pages/widgets.vue').then(m => m.default) },
{ path: '/i/messaging', name: 'messaging', component: MkMessaging }, { path: '/i/messaging', name: 'messaging', component: MkMessaging },
{ path: '/i/messaging/group/:group', component: MkMessagingRoom }, { path: '/i/messaging/group/:group', component: MkMessagingRoom },
{ path: '/i/messaging/:user', component: MkMessagingRoom }, { path: '/i/messaging/:user', component: MkMessagingRoom },

View File

@ -14,7 +14,6 @@ import notificationPreview from './notification-preview.vue';
import userTimeline from './user-timeline.vue'; import userTimeline from './user-timeline.vue';
import userListTimeline from './user-list-timeline.vue'; import userListTimeline from './user-list-timeline.vue';
import uiContainer from './ui-container.vue'; import uiContainer from './ui-container.vue';
import postForm from './post-form.vue';
Vue.component('mk-ui', ui); Vue.component('mk-ui', ui);
Vue.component('mk-note', note); Vue.component('mk-note', note);
@ -30,4 +29,3 @@ Vue.component('mk-notification-preview', notificationPreview);
Vue.component('mk-user-timeline', userTimeline); Vue.component('mk-user-timeline', userTimeline);
Vue.component('mk-user-list-timeline', userListTimeline); Vue.component('mk-user-list-timeline', userListTimeline);
Vue.component('ui-container', uiContainer); Vue.component('ui-container', uiContainer);
Vue.component('mk-post-form', postForm);

View File

@ -2,7 +2,7 @@
<div class="ulveipglmagnxfgvitaxyszerjwiqmwl"> <div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
<div class="bg" ref="bg"></div> <div class="bg" ref="bg"></div>
<div class="main" ref="main"> <div class="main" ref="main">
<mk-post-form ref="form" <x-post-form ref="form"
:reply="reply" :reply="reply"
:renote="renote" :renote="renote"
:mention="mention" :mention="mention"
@ -17,8 +17,13 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import anime from 'animejs'; import anime from 'animejs';
import XPostForm from './post-form.vue';
export default Vue.extend({ export default Vue.extend({
components: {
XPostForm
},
props: { props: {
reply: { reply: {
type: Object, type: Object,

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-post-form"> <div class="gafaadew">
<div class="form"> <div class="form">
<header> <header>
<button class="cancel" @click="cancel"><fa icon="times"/></button> <button class="cancel" @click="cancel"><fa icon="times"/></button>
@ -387,7 +387,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-post-form .gafaadew
max-width 500px max-width 500px
width calc(100% - 16px) width calc(100% - 16px)
margin 8px auto margin 8px auto