vue打包之compression-webpack-plugin实现gzip压缩

上一篇代码打包分块已经讲解完了：

chainWebpack之optimization.splitChunks的cacheGroups缓存组代码分块实践案

当项目较大的时候，合理的分块打包可以大大降低页面资源加载的耗时，让waterfall时间变得更短，页面打开更快，实现就算在低性能引擎的浏览器也能获得良好的用户体验，毕竟不是谁都能V8，好吧，这次要说的是继vue打包分块之后的又一加速利器：gzip压缩，可以让打包文件变得更小，首先要声明的是，前端要使用gzip压缩，必须要后端开启服务器的gzip功能，如果是nginx，开始的办法小编大概知道是在nginx.config文件里，设置转发url的地方加上：

gzip_static on

好像还可以配置哪种文件类型（js|css|png|woff|ttf|eot|svg）支持gzip，具体的找项目的后端配置就是了，很简单的，后端开启了gzip服务以后，前端就可将代码文件打包成gz扩展名的压缩文件上传到服务器使用，压缩后的文件体积跟window系统的zip压缩软件压缩后的大小一样，可以说真的是一把利器；
前端压缩所用的插件就是compression-webpack-plugin了:

npm i compression-webpack-plugin --save-dev

安装好后，在vue.config.js配置如下：

const compressionPlugin = require("compression-webpack-plugin")

module.exports = {
    configureWebpack: {
        plugins: [
            new compressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: /\.(js|css|woff|woff2|ttf|eot|png|svg|jpg|jpeg)(\?.*)?$/i,
                //threshold: 10240,//文件大于这个值（10K）的才压缩，默认为0
                minRatio: 1,//默认为0.8，能压缩到小于等于原来的80%才压缩，小编这里觉得能压缩就行，其实有些文件压缩反而变大的
                deleteOriginalAssets: true//压缩完是否删除源文件
            })
        ]
    }
}

这样设置以后，打包完基本上整个dist文件夹里全是gz压缩包，直接上传到服务器，网页加载速度真的是飞快，可以说，分块和压缩做完之后，整个项目都想变得非常小，简直是完美搭配；

设置后有可能发起本地npm run dev启动项目的时候，会报错，判断一下生成环境才使用这个插件就好；

快去试试吧