Feat: bundle size optimization

package.json

@@ -8,10 +8,11 @@
     "serve:education": "vue-cli-service serve --mode education",
     "serve:invention": "vue-cli-service serve --mode invention",
     "build": "vue-cli-service build",
-    "build:internet": "vue-cli-service build --mode internet",
-    "build:education": "vue-cli-service build --mode education",
-    "build:invention": "vue-cli-service build --mode invention",
-    "lint": "vue-cli-service lint"
+    "build:internet": "NODE_ENV='production' vue-cli-service build --mode internet",
+    "build:education": "NODE_ENV='production' vue-cli-service build --mode education",
+    "build:invention": "NODE_ENV='production' vue-cli-service build --mode invention",
+    "lint": "vue-cli-service lint",
+    "analyzer": "ANALYZER=true vue-cli-service serve"
   },
   "dependencies": {
     "axios": "^0.19.0",
@@ -38,7 +39,8 @@
     "eslint-plugin-vue": "^5.0.0",
     "quill-image-extend-module": "^1.1.2",
     "terser-webpack-plugin": "^2.2.1",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "webpack-bundle-analyzer": "^3.6.0"
   },
   "eslintConfig": {
     "root": true,

src/page/timepoint/add.vue

@@ -150,7 +150,8 @@ import { Quill } from 'vue-quill-editor'
 import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
 import config from '../../../config'
 import dayjs from 'dayjs'
-import { clone } from 'lodash'
+// import { clone } from 'lodash'
+import clone from 'lodash/clone'
 
 Quill.register('modules/ImageExtend', ImageExtend)
 

src/page/timepoint/edit.vue

@@ -158,7 +158,8 @@ import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
 import config from '../../../config'
 import dayjs from 'dayjs'
 // import isJSON from '@/utils/isJSON'
-import { clone } from 'lodash'
+// import { clone } from 'lodash'
+import clone from 'lodash/clone'
 
 Quill.register('modules/ImageExtend', ImageExtend)
 

vue.config.js

@@ -1,6 +1,26 @@
 // import config from './config.js'
 // const UglifyPlugin = require('uglifyjs-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
+const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+// webpack 插件
+const webpackPlugins = []
+if(process.env.ANALYZER){
+  webpackPlugins.push(new BundleAnalyzer())
+}
+
+// webpack 打包优化插件
+const minimizers = []
+if(process.env.NODE_ENV === 'production'){
+  minimizers.push(new TerserPlugin({
+    terserOptions: {
+      ecma: 6,
+      compress: { drop_console: true },
+      output: { comments: false, beautify: false }
+    },
+    extractComments: false
+  }))
+}
 
 const path = require('path')
 function resolve (dir) {
@@ -11,15 +31,17 @@ module.exports = {
   publicPath: '',
   outputDir: 'dist',
   runtimeCompiler: true,
+  productionSourceMap: false,
   configureWebpack: {
-    plugins: [],
+    plugins: webpackPlugins,
     resolve: {
       alias: {
         '@': resolve('src')
       }
     },
     optimization: {
-      minimizer: [new TerserPlugin()]
+      minimize: true,
+      minimizer: minimizers
     }
   },
   devServer: {