添加压缩

package.json

@@ -13,6 +13,7 @@
     "@tinymce/tinymce-vue": "^3.2.8",
     "ant-design-vue": "^1.7.5",
     "axios": "^0.21.1",
+    "compression-webpack-plugin": "^6.0.1",
     "core-js": "^3.6.5",
     "echarts": "^5.1.2",
     "js-cookie": "^2.2.1",

vue.config.js

@@ -1,38 +1,127 @@
-/**
- *@desc    webpack配置文件
- */
-// const path = require('path')
-// const resolve = dir => {
-//   return path.join(__dirname, dir)
-// }
+"use strict";
+const path = require("path");
+// 代码压缩
+const TerserPlugin = require('terser-webpack-plugin')
+// gzip压缩
+const CompressionWebpackPlugin = require('compression-webpack-plugin')
+// 是否为生产环境
+const isProduction = process.env.NODE_ENV !== 'development'
 
-module.exports = {
-  runtimeCompiler: true,
-  // // 放置静态资源的地方 (js/css/img/font/...)
-  // assetsDir: 'static',
 
-  // // 是否为生产环境构建生成 source map？
-  // productionSourceMap: false,
+function resolve (dir) {
+  return path.join(__dirname, dir);
+}
 
-  // // 配置 webpack-dev-server 行为。
-  // devServer: {
-  //   open: true
-  // },
-  // publicPath: './',
+console.log(process.env)
 
-  // // 将构建好的文件输出到哪里
-  // outputDir: 'dist',
-  // chainWebpack: config => {
-  //   config.resolve.alias
-  //     .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
-  //   // .set('_c', resolve('src/components'))
-  //   // .set('_conf', resolve('src/config'))
-  // },
+module.exports = {
+  productionSourceMap: false,
+  lintOnSave: false,
+  configureWebpack: {
+    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
+      filename: `[name].${new Date().getTime()}.js`,
+      chunkFilename: `[name].${new Date().getTime()}.js`
+    }
+  },
+  chainWebpack: config => {
+    // 使用svg-sprite-loader加载icon图标
+    config.module
+      .rule("svg")
+      .exclude.add(resolve("src/icons"))
+      .end();
+    config.module
+      .rule("icons")
+      .test(/\.svg$/)
+      .include.add(resolve("src/icons"))
+      .end()
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
+      .options({
+        symbolId: "icon-[name]"
+      })
+      .end();
+    // 图片压缩
+    if (isProduction) {
+      // 删除预加载
+      config.plugins.delete('preload');
+      config.plugins.delete('prefetch');
+      // 压缩代码
+      config.optimization.minimize(true);
+      // 分割代码
+      config.optimization.splitChunks({
+        chunks: 'all'
+      })
+    }
+  },
+  configureWebpack: config => {
+    // 生产环境相关配置
+    if (isProduction) {
+      // 代码压缩
+      config.plugins.push(
+        new TerserPlugin({
+          terserOptions: {
+            //生产环境自动删除console
+            compress: {
+              warnings: false, // 若打包错误，则注释这行
+              drop_debugger: true,
+              drop_console: true,
+              pure_funcs: ['console.log']
+            }
+          },
+          sourceMap: false,
+          parallel: true
+        })
+      )
 
-  // pluginOptions: {
-  //   'style-resources-loader': {
-  //     preProcessor: 'less',
-  //     patterns: [path.resolve(__dirname, './src/assets/css/variable.less')]
-  //   }
-  // }
-}
+      // gzip压缩
+      const productionGzipExtensions = ['html', 'js', 'css']
+      config.plugins.push(
+        new CompressionWebpackPlugin({
+          filename: '[path].gz[query]',
+          algorithm: 'gzip',
+          test: new RegExp(
+            '\\.(' + productionGzipExtensions.join('|') + ')$'
+          ),
+          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
+          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
+          deleteOriginalAssets: false // 删除原文件
+        })
+      )
+
+      // 公共代码抽离
+      config.optimization = {
+        splitChunks: {
+          cacheGroups: {
+            vendor: {
+              chunks: 'all',
+              test: /node_modules/,
+              name: 'vendor',
+              minChunks: 1,
+              maxInitialRequests: 5,
+              minSize: 0,
+              priority: 100
+            },
+            common: {
+              chunks: 'all',
+              test: /[\\/]src[\\/]js[\\/]/,
+              name: 'common',
+              minChunks: 2,
+              maxInitialRequests: 5,
+              minSize: 0,
+              priority: 60
+            },
+            styles: {
+              name: 'styles',
+              test: /\.(sa|sc|c)ss$/,
+              chunks: 'all',
+              enforce: true
+            },
+            runtimeChunk: {
+              name: 'manifest'
+            }
+          }
+        }
+      }
+    }
+  }
+};