refactor(client): ✨

package.json

@@ -189,7 +189,6 @@
 		"postcss-loader": "3.0.0",
 		"prismjs": "1.20.0",
 		"probe-image-size": "5.0.0",
-		"progress-bar-webpack-plugin": "2.1.0",
 		"promise-limit": "2.7.0",
 		"promise-sequential": "1.1.1",
 		"pug": "2.0.4",
@@ -223,7 +222,6 @@
 		"syslog-pro": "1.0.0",
 		"systeminformation": "4.23.3",
 		"syuilo-password-strength": "0.0.1",
-		"terser-webpack-plugin": "2.3.5",
 		"textarea-caret": "3.1.0",
 		"three": "0.115.0",
 		"tinycolor2": "1.4.1",

src/client/app.vue

@@ -163,7 +163,6 @@ import { v4 as uuid } from 'uuid';
 import i18n from './i18n';
 import { host, instanceName } from './config';
 import { search } from './scripts/search';
-import MkToast from './components/toast.vue';
 
 const DESKTOP_THRESHOLD = 1100;
 
@@ -535,14 +534,14 @@ export default Vue.extend({
 			});
 		},
 
-		onNotification(notification) {
+		async onNotification(notification) {
 			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
 			if (true) {
 				this.$root.stream.send('readNotification', {
 					id: notification.id
 				});
 
-				this.$root.new(MkToast, {
+				this.$root.new(await import('./components/toast.vue').then(m => m.default), {
 					notification
 				});
 			}

src/client/pages/index.home.vue

@@ -29,7 +29,6 @@ import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatell
 import { faComments } from '@fortawesome/free-regular-svg-icons';
 import Progress from '../scripts/loading';
 import XTimeline from '../components/timeline.vue';
-import XTutorial from './index.home.tutorial.vue';
 import XPostForm from '../components/post-form.vue';
 
 export default Vue.extend({
@@ -41,7 +40,7 @@ export default Vue.extend({
 
 	components: {
 		XTimeline,
-		XTutorial,
+		XTutorial: () => import('./index.home.tutorial.vue').then(m => m.default),
 		XPostForm,
 	},
 

src/client/scripts/select-drive-file.ts

@@ -1,13 +1,13 @@
-import DriveWindow from '../components/drive-window.vue';
-
 export function selectDriveFile($root: any, multiple) {
 	return new Promise((res, rej) => {
-		const w = $root.new(DriveWindow, {
+		import('../components/drive-window.vue').then(m => m.default).then(dialog => {
-			type: 'file',
+			const w = $root.new(dialog, {
-			multiple
+				type: 'file',
-		});
+				multiple
-		w.$once('selected', files => {
+			});
-			res(multiple ? files : files[0]);
+			w.$once('selected', files => {
+				res(multiple ? files : files[0]);
+			});
 		});
 	});
 }

src/client/scripts/select-drive-folder.ts

@@ -1,13 +1,13 @@
-import DriveWindow from '../components/drive-window.vue';
-
 export function selectDriveFolder($root: any, multiple) {
 	return new Promise((res, rej) => {
-		const w = $root.new(DriveWindow, {
+		import('../components/drive-window.vue').then(m => m.default).then(dialog => {
-			type: 'folder',
+			const w = $root.new(dialog, {
-			multiple
+				type: 'folder',
-		});
+				multiple
-		w.$once('selected', folders => {
+			});
-			res(multiple ? folders : (folders.length === 0 ? null : folders[0]));
+			w.$once('selected', folders => {
+				res(multiple ? folders : (folders.length === 0 ? null : folders[0]));
+			});
 		});
 	});
 }

webpack.config.ts

@@ -4,10 +4,7 @@
 
 import * as fs from 'fs';
 import * as webpack from 'webpack';
-import * as chalk from 'chalk';
 const { VueLoaderPlugin } = require('vue-loader');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
 
 class WebpackOnBuildPlugin {
 	constructor(readonly callback: (stats: any) => void) {
@@ -118,10 +115,7 @@ module.exports = {
 		}]
 	},
 	plugins: [
-		new ProgressBarPlugin({
+		new webpack.ProgressPlugin({}),
-			format: chalk`  {cyan.bold Yes we can} {bold [}:bar{bold ]} {green.bold :percent} {gray :elapseds}`,
-			clear: false
-		}),
 		new webpack.DefinePlugin({
 			_VERSION_: JSON.stringify(meta.version),
 			_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]: [string, any]) => [k, v._lang_])),
@@ -135,7 +129,6 @@ module.exports = {
 	output: {
 		path: __dirname + '/built/client/assets',
 		filename: `[name].${meta.version}.js`,
-		chunkFilename: '[fullhash].[id].js',
 		publicPath: `/assets/`
 	},
 	resolve: {
@@ -149,13 +142,13 @@ module.exports = {
 	resolveLoader: {
 		modules: ['node_modules']
 	},
-	externals: {
+	cache: {
-		moment: 'moment'
+		type: 'filesystem',
+		
+		buildDependencies: {
+			config: [__filename]
+		}
 	},
-	optimization: {
-		minimizer: [new TerserPlugin()]
-	},
-	cache: false,
 	devtool: false, //'source-map',
 	mode: isProduction ? 'production' : 'development'
 };

yarn.lock

@@ -7565,15 +7565,7 @@ process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-progress-bar-webpack-plugin@2.1.0:
+progress@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/progress-bar-webpack-plugin/-/progress-bar-webpack-plugin-2.1.0.tgz#f7f8c8c461f40b87a8ff168443f494289b07ee65"
-  integrity sha512-UtlZbnxpYk1wufEWfhIjRn2U52zlY38uvnzFhs8rRxJxC1hSqw88JNR2Mbpqq9Kix8L1nGb3uQ+/1BiUWbigAg==
-  dependencies:
-    chalk "^3.0.0"
-    progress "^2.0.3"
-
-progress@^2.0.0, progress@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
@@ -9246,7 +9238,7 @@ tar@^6.0.1:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
-terser-webpack-plugin@2.3.5, terser-webpack-plugin@^2.3.1:
+terser-webpack-plugin@^2.3.1:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.5.tgz#5ad971acce5c517440ba873ea4f09687de2f4a81"
   integrity sha512-WlWksUoq+E4+JlJ+h+U+QUzXpcsMSSNXkDy9lBVkSqDn1w23Gg29L/ary9GeJVYCGiNJJX7LnVc4bwL1N3/g1w==