Browse Source

:sparkles: Introducing new features.静态资源生产环境启用gzip压缩,需要对应的静态资源服务器,如nginx等启用gzip压缩,开启方式可以参考
https://blog.csdn.net/dutong0321/article/details/86681328

lishangbu 5 years ago
parent
commit
640b8b6662
2 changed files with 21 additions and 0 deletions
  1. 1 0
      package.json
  2. 20 0
      vue.config.js

+ 1 - 0
package.json

@@ -38,6 +38,7 @@
     "@vue/cli-plugin-babel": "~3.8.0",
     "@vue/cli-service": "~3.8.4",
     "chai": "^4.1.2",
+    "compression-webpack-plugin": "^3.1.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "vue-template-compiler": "^2.6.10"

+ 20 - 0
vue.config.js

@@ -3,6 +3,8 @@
  * https://cli.vuejs.org/zh/config/
  */
 const url = 'http://pigx-gateway:9999'
+const CompressionWebpackPlugin = require('compression-webpack-plugin')
+const productionGzipExtensions = ['js', 'css']
 module.exports = {
   lintOnSave: true,
   productionSourceMap: false,
@@ -19,6 +21,24 @@ module.exports = {
       .add('classlist-polyfill')
       .end()
   },
+  // eslint-disable-next-line
+  configureWebpack: (config) => {
+    if (process.env.NODE_ENV === 'production') {
+      // 仅在生产环境下启用该配置
+      return {
+        plugins: [
+          new CompressionWebpackPlugin({
+            filename: '[path].gz[query]',
+            algorithm: 'gzip',
+            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+            threshold: 1024, // 只有大小大于该值的资源会被处理,当前配置为对于超过1k的数据进行处理,不足1k的可能会越压缩越大
+            minRatio: 0.99, // 只有压缩率小于这个值的资源才会被处理
+            deleteOriginalAssets: true // 删除原文件
+          })
+        ]
+      }
+    }
+  },
   // 配置转发代理
   devServer: {
     disableHostCheck: true,