Vue打包对JS进行压缩

小感触 2020年02月29日 348次浏览

npm build之后,工程里面的JS文件一般来说都会非常的大,比如我这边有的JS文件chunk-vendors.02b5d4.js单文件都达到了6Mb的大小,针对这种情况,可以在打包的时候,配置压缩插件,对这些文件进行压缩处理。文件变小了,在进行请求的时候,就会变得更快一些。

安装插件:

npm: cnpm install --save-dev compression-webpack-plugin

yarn: yarn add compression-webpack-plugin

在安装完成之后,需要进行一些配置,Vue针对这些不同版本配置流程如下:

针对Vue2.X:

在项目目录config/index.js中可以开启gzip压缩:

productionGzip: true,
productionGzipExtensions: ['js', 'css'],

针对Vue3.X

在项目文件vue.config.js中增加配置:

configureWebpack: config => {
    let plugins = [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
          '\\.(' +
          ['js', 'css'].join('|') +
          ')$',
        ),
        threshold: 10240,
        minRatio: 0.8,
      }),
    ]
    if (process.env.NODE_ENV !== 'development') {
      config.plugins = [...config.plugins, ...plugins]
    }
}

以上配置完成之后,在打包完成时,就会在对应目录出现JS文件的压缩版本,使用的时候,如果浏览器支持g-zip,则会优先请求压缩版的js文件,减少资源传输时间

QQ截图20200229173454.png

可以看到在浏览器请求中,*4aa.js文件请求大小为2Mb,这个大小就是压缩后的那个文件:

QQ截图20200229173744.png