webpack打包优化之gzip压缩

3,778 阅读1分钟

使用gzip压缩可将代码体积减少70%以上,使用webpack进行代码压缩的详细步骤如下:

1.下载压缩插件

cnpm install compression-webpack-plugin@6.1.1

2.在vue.config.js中实例化插件

configureWebpack: {
    // webpack plugins
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip', // 使用gzip压缩
        test: /\.js$|\.html$|\.css$/, // 匹配文件名
        filename: '[path][base].gz', // 压缩后的文件名(保持原文件名,后缀加.gz)
        minRatio: 0.8, // 压缩率小于1才会压缩
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
      })
    ],
  },