refactor: add build gzip plugin and upgrade umi

config/config.ts

@@ -1,9 +1,11 @@
 // https://umijs.org/config/
 
-import { defineConfig } from '@umijs/max'
 import defaultSettings from './defaultSettings'
 import proxy from './proxy'
 import routes from './routes'
+import { defineConfig } from '@umijs/max'
+
+const CompressionWebpackPlugin = require('compression-webpack-plugin')
 
 const { REACT_APP_ENV } = process.env
 const prodGzipList = ['js', 'css', 'html']
@@ -20,7 +22,7 @@ export default defineConfig({
   access: {},
   dva: {},
   srcTranspiler: 'esbuild',
-  mfsu: { esbuild: true },
+  mfsu: {},
   fastRefresh: true,
   unocss: {
     watch: ['src/pages/**/*.{jsx,tsx,less}', 'src/components/**/*.{jsx,tsx,less}'] // 添加其他包含 unocss 的 classname 的文件目录
@@ -47,37 +49,18 @@ export default defineConfig({
       { libraryName: '@formily/antd', libraryDirectory: 'es', style: true },
       '@formily/antd'
     ]
-  ]
-  // chainWebpack(config, { env }) {
-  //   if (env === 'production') {
-  //     config.merge({
-  //       optimization: {
-  //         minimize: true,
-  //         splitChunks: {
-  //           chunks: 'all',
-  //           minSize: 30000,
-  //           minChunks: 2,
-  //           automaticNameDelimiter: '.',
-  //           cacheGroups: {
-  //             vendor: {
-  //               name: 'vendors',
-  //               test: ({ resource }) => /^.(?=react).$/.test(resource),
-  //               chunks: 'all',
-  //               priority: 20
-  //             }
-  //           }
-  //         }
-  //       }
-  //     })
-  //     config.plugin('compression-webpack-plugin').use(
-  //       new CompressionWebpackPlugin({
-  //         // filename: 文件名称，这里我们不设置，让它保持和未压缩的文件同一个名称
-  //         algorithm: 'gzip', // 指定生成gzip格式
-  //         test: new RegExp('\\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩
-  //         threshold: 10000, //对超过10k的数据进行压缩
-  //         minRatio: 0.6 // 压缩比例，值为0 ~ 1
-  //       })
-  //     )
-  //   }
-  // }
+  ],
+  chainWebpack(config, { env }) {
+    if (env === 'production') {
+      config.plugin('compression-webpack-plugin').use(
+        new CompressionWebpackPlugin({
+          // filename: 文件名称，这里我们不设置，让它保持和未压缩的文件同一个名称
+          algorithm: 'gzip', // 指定生成gzip格式
+          test: new RegExp('\\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩
+          threshold: 10000, //对超过10k的数据进行压缩
+          minRatio: 0.6 // 压缩比例，值为0 ~ 1
+        })
+      )
+    }
+  }
 })

package.json

@@ -65,6 +65,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "babel-plugin-import": "^1.13.5",
+    "compression-webpack-plugin": "^10.0.0",
     "cross-env": "^7.0.0",
     "husky": "^8.0.0",
     "lint-staged": "^10.0.0",

pnpm-lock.yaml

@@ -28,6 +28,7 @@ specifiers:
   array-move: ^4.0.0
   babel-plugin-import: ^1.13.5
   classnames: ^2.2.6
+  compression-webpack-plugin: ^10.0.0
   cross-env: ^7.0.0
   dayjs: ^1.10.7
   eslint: ^8.17.0
@@ -87,6 +88,7 @@ devDependencies:
   '@types/react-dom': 18.0.5
   '@unocss/cli': 0.44.5
   babel-plugin-import: 1.13.5
+  compression-webpack-plugin: 10.0.0
   cross-env: 7.0.3
   eslint: 8.18.0
   husky: 8.0.1
@@ -2147,7 +2149,6 @@ packages:
 
   /@types/json-schema/7.0.11:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
-    dev: false
 
   /@types/lodash/4.14.182:
     resolution: {integrity: sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==}
@@ -2959,6 +2960,15 @@ packages:
       screenfull: 5.2.0
     dev: false
 
+  /ajv-formats/2.1.1:
+    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+    dependencies:
+      ajv: 8.11.0
+    dev: true
+
   /ajv-keywords/3.5.2_ajv@6.12.6:
     resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
     peerDependencies:
@@ -2967,6 +2977,15 @@ packages:
       ajv: 6.12.6
     dev: false
 
+  /ajv-keywords/5.1.0_ajv@8.11.0:
+    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
+    peerDependencies:
+      ajv: ^8.8.2
+    dependencies:
+      ajv: 8.11.0
+      fast-deep-equal: 3.1.3
+    dev: true
+
   /ajv/6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
     dependencies:
@@ -3750,6 +3769,16 @@ packages:
     resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
     dev: false
 
+  /compression-webpack-plugin/10.0.0:
+    resolution: {integrity: sha512-wLXLIBwpul/ALcm7Aj+69X0pYT3BYt6DdPn3qrgBIh9YejV9Bju9ShhlAsjujLyWMo6SAweFIWaUoFmXZNuNrg==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      webpack: ^5.1.0
+    dependencies:
+      schema-utils: 4.0.0
+      serialize-javascript: 6.0.0
+    dev: true
+
   /compute-scroll-into-view/1.0.17:
     resolution: {integrity: sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==}
     dev: false
@@ -7977,7 +8006,6 @@ packages:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
     dependencies:
       safe-buffer: 5.2.1
-    dev: false
 
   /randomfill/1.0.4:
     resolution: {integrity: sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==}
@@ -9022,7 +9050,6 @@ packages:
 
   /safe-buffer/5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-    dev: false
 
   /safe-regex/1.1.0:
     resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==}
@@ -9073,6 +9100,16 @@ packages:
       ajv-keywords: 3.5.2_ajv@6.12.6
     dev: false
 
+  /schema-utils/4.0.0:
+    resolution: {integrity: sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==}
+    engines: {node: '>= 12.13.0'}
+    dependencies:
+      '@types/json-schema': 7.0.11
+      ajv: 8.11.0
+      ajv-formats: 2.1.1
+      ajv-keywords: 5.1.0_ajv@8.11.0
+    dev: true
+
   /screenfull/5.2.0:
     resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
     engines: {node: '>=0.10.0'}
@@ -9108,6 +9145,12 @@ packages:
     dependencies:
       lru-cache: 6.0.0
 
+  /serialize-javascript/6.0.0:
+    resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
+    dependencies:
+      randombytes: 2.1.0
+    dev: true
+
   /set-value/2.0.1:
     resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
     engines: {node: '>=0.10.0'}