热修

package.json

@@ -2,9 +2,7 @@
   "name": "hiric",
   "version": "0.1.0",
   "private": true,
-  "sideEffects": false,
   "scripts": {
-    "analyze": "vue-cli-service build",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
@@ -41,13 +39,9 @@
     "compression-webpack-plugin": "^6.1.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "glob": "^11.0.0",
-    "happypack": "^5.0.1",
     "sass-loader": "^8.0.0",
-    "terser-webpack-plugin": "^4.2.3",
     "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.47.0",
+    "webpack": "^4.47.0"
-    "webpack-bundle-analyzer": "^4.10.2"
   },
   "eslintConfig": {
     "root": true,

vue.config.js

@@ -1,26 +1,83 @@
-
+const { DefinePlugin } = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-module.exports = {
+const CompressionWebpackPlugin = require('compression-webpack-plugin');
-    devServer:{
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
-        proxy: {
+module.exports = {
-            '/api':{
+  devServer: {
-                target:'http://192.168.10.54:9100/v1',
+    proxy: {
-                changOrigin:true,
+      '/api': {
-                pathRewrite:{
+        target: 'http://192.168.10.54:9100/v1',
-                    '^/api':''
+        changeOrigin: true,
-                }
+        pathRewrite: {
-            }
+          '^/api': '',
-        }
+        },
+      },
     },
-    configureWebpack: {
+  },
-        optimization: {
+  configureWebpack: {
-            minimizer: [
+    optimization: {
-                new CssMinimizerPlugin(),
+      minimizer: [
-            ],
+        new TerserPlugin({
-            splitChunks: {
+          terserOptions: {
-                chunks: 'all'
+            compress: {
-              }
+              drop_console: true, // 删除 console
-        }
+            },
-    }
+          },
-}
+        }),
+        new CssMinimizerPlugin(),
+      ],
+      splitChunks: {
+        chunks: 'all',
+        maxInitialRequests: Infinity,
+        minSize: 20000, // 生成块的最小大小
+        maxSize: 500000, // 生成块的最大大小
+        cacheGroups: {
+          vendors: {
+            test: /[\\/]node_modules[\\/]/,
+            name(module) {
+              const packageName = module.context.match(
+                /[\\/]node_modules[\\/](.*?)([\\/]|$)/
+              )[1];
+              return `npm.${packageName.replace('@', '')}`;
+            },
+          },
+        },
+      },
+      runtimeChunk: 'single',
+    },
+    plugins: [
+      new CompressionWebpackPlugin({
+        test: /\.(js|css|html|svg)$/, // 需要压缩的文件类型
+        threshold: 10240, // 资源超过10KB时压缩
+        deleteOriginalAssets: false, // 是否删除原始文件
+      }),
+      new BundleAnalyzerPlugin({
+        analyzerMode: 'static', // 生成静态报告文件
+        openAnalyzer: false, // 打包后是否自动打开报告
+      }),
+    ],
+  },
+  chainWebpack: config => {
+    config.plugin('define').use(DefinePlugin, [
+      {
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      },
+    ]);
+
+    config.module
+      .rule('images')
+      .use('url-loader')
+      .loader('url-loader')
+      .tap(options => ({
+        limit: 8192, // 图片小于8KB时转换为base64
+        fallback: {
+          loader: 'file-loader',
+          options: {
+            name: 'img/[name].[hash:8].[ext]',
+          },
+        },
+      }));
+  },
+};