关于前端:前端如何配置gzip压缩

46次阅读

共计 693 个字符，预计需要花费 2 分钟才能阅读完成。

webpack 有一个文件压缩的插件，能够将大文件压缩成 gzip 的格局。
应用起来也非常简单，先装置：npm install –save-dev compression-webpack-plugin

而后批改 webpack 配置（vue.config.js）：

const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 可退出须要的其余文件类型，比方 json
// 图片不要压缩，体积会比原来还大
const productionGzipExtensions = ["js", "css"];
 
module.exports = {
  configureWebpack: config => {if (process.env.NODE_ENV === "production"){
        config.plugins.push(
          new CompressionWebpackPlugin({filename: '[path].gz[query]',
            algorithm: "gzip",
            test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
            threshold: 10240, // 对超过 10k 的数据进行压缩
            minRatio: 0.6 // 压缩比例，值为 0 ~ 1,
            deleteOriginalAssets:false  // 删除原文件
          })
        )
    }

    return {
        name:name,
        resolve:{
            alias:{'@':resolve('src')
            }
        }
    }
  }
};

配置之后，npm run build，咱们能够看到文件曾经被压缩了

正文完