feat: generate gzip products at build time (#547)

* feat: generate gzip products at build time

Signed-off-by: hongjunlong <2211898719@qq.com>

* chore: update pnpm-lock.yaml

Signed-off-by: Ryan Wang <i@ryanc.cc>

Co-authored-by: Ryan Wang <i@ryanc.cc>

package.json

@@ -58,6 +58,7 @@
     "@vue/cli-plugin-router": "~5.0.4",
     "@vue/cli-plugin-vuex": "~5.0.4",
     "@vue/cli-service": "~5.0.4",
+    "compression-webpack-plugin": "^9.2.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",

pnpm-lock.yaml

@@ -15,6 +15,7 @@ specifiers:
   '@vue/cli-plugin-vuex': ~5.0.4
   '@vue/cli-service': ~5.0.4
   ant-design-vue: ^1.7.8
+  compression-webpack-plugin: ^9.2.0
   dayjs: ^1.11.0
   enquire.js: ^2.1.6
   eslint: ^7.32.0
@@ -89,6 +90,7 @@ devDependencies:
   '@vue/cli-plugin-router': 5.0.4_@vue+cli-service@5.0.4
   '@vue/cli-plugin-vuex': 5.0.4_@vue+cli-service@5.0.4
   '@vue/cli-service': 5.0.4_5d13c34fbb1c7f04d8fb86bfe0fd54c5
+  compression-webpack-plugin: 9.2.0
   eslint: 7.32.0
   eslint-config-prettier: 8.5.0_eslint@7.32.0
   eslint-plugin-prettier: 4.0.0_2544802fe0b6e1e28814bd742f96f471
@@ -3215,6 +3217,16 @@ packages:
       mime-db: 1.51.0
     dev: true
 
+  /compression-webpack-plugin/9.2.0:
+    resolution: {integrity: sha512-R/Oi+2+UHotGfu72fJiRoVpuRifZT0tTC6UqFD/DUo+mv8dbOow9rVOuTvDv5nPPm3GZhHL/fKkwxwIHnJ8Nyw==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^5.1.0
+    dependencies:
+      schema-utils: 4.0.0
+      serialize-javascript: 6.0.0
+    dev: true
+
   /compression/1.7.4:
     resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
     engines: {node: '>= 0.8.0'}

vue.config.js

@@ -3,6 +3,9 @@ const pkg = require('./package.json')
 const { defineConfig } = require('@vue/cli-service')
 const dynamicThemePlugin = require('./src/webpack/dynamicTheme.js')
 
+const CompressionPlugin = require('compression-webpack-plugin')
+const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
+
 module.exports = defineConfig({
   publicPath: process.env.PUBLIC_PATH,
 
@@ -11,6 +14,18 @@ module.exports = defineConfig({
       args[0].version = pkg.version
       return args
     })
+    if (process.env.NODE_ENV === 'production') {
+      config.plugin('compressionPlugin').use(
+        new CompressionPlugin({
+          filename: '[path][base].gz',
+          algorithm: 'gzip',
+          test: productionGzipExtensions,
+          threshold: 10240,
+          minRatio: 0.8,
+          deleteOriginalAssets: false
+        })
+      )
+    }
   },
 
   configureWebpack: {