perf(client): Lazy load themes

This commit is contained in:
syuilo 2020-04-04 08:25:28 +09:00
parent cd3c2484ee
commit f2e347fec1

View file

@ -18,7 +18,7 @@ import PostFormDialog from './components/post-form-dialog.vue';
import Dialog from './components/dialog.vue'; import Dialog from './components/dialog.vue';
import Menu from './components/menu.vue'; import Menu from './components/menu.vue';
import { router } from './router'; import { router } from './router';
import { applyTheme, lightTheme, builtinThemes } from './theme'; import { applyTheme, lightTheme } from './theme';
import { isDeviceDarkmode } from './scripts/is-device-darkmode'; import { isDeviceDarkmode } from './scripts/is-device-darkmode';
import createStore from './store'; import createStore from './store';
@ -149,10 +149,11 @@ os.init(async () => {
}, false) }, false)
store.watch(state => state.device.darkMode, darkMode => { store.watch(state => state.device.darkMode, darkMode => {
// TODO: このファイルでbuiltinThemesを参照するとcode splittingが効かず、初回読み込み時に全てのテーマコードを読み込むことになってしまい無駄なので何とかする import('./theme').then(({ builtinThemes }) => {
const themes = builtinThemes.concat(store.state.device.themes); const themes = builtinThemes.concat(store.state.device.themes);
applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme))); applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
}); });
});
//#region Sync dark mode //#region Sync dark mode
if (store.state.device.syncDeviceDarkMode) { if (store.state.device.syncDeviceDarkMode) {