前端 webpack在打包时借助compression-webpack-plugin插件实现gzip压缩

gzip压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。

1、下载compression-webpack-plugin

npm i compression-webpack-plugin --save

2、在vue.config.js使用

1.  
   // 导入compression-webpack-plugin
2.  
   const CompressionWebpackPlugin = require('compression-webpack-plugin');
3.  
   // 定义压缩文件类型
4.  
   const productionGzipExtensions = ['js', 'css'];
5.  
    
6.  
   module.exports = {
7.  
   configureWebpack: config => {
8.  
   // 开发环境不配置
9.  
   if (process.env.NODE_ENV !== 'production') return
10.  
    // 生产环境才去配置
11.  
    return {
12.  
    plugins: [
13.  
    new CompressionWebpackPlugin({ //zip压缩插件
14.  
    filename: '[path].gz[query]',
15.  
    algorithm: 'gzip',
16.  
    test: new RegExp('\\.(' productionGzipExtensions.join('|') ')$'),//匹配文件名
17.  
    threshold: 10240,//对10K以上的数据进行压缩
18.  
    minRatio: 0.8,
19.  
    deleteOriginalAssets: false,//是否删除源文件
20.  
    }),
21.  
    ],
22.  
    }
23.  
    },
24.  
    }

判断是否配置成功

1、Vue打包的目录，对应压缩文件中就会多了.gz的文件；

2、在http请求中，也可以看到响应头多了Content-Encoding: gzip，没开启gzip压缩是没这个的。

这篇好文章是转载于：学新通技术网