性能优化-webpack配置gzip

3步搞定,实测1.3Mjs压缩到363k,体积减少70%
1.装包
yarn add compression-webpack-plugin --dev
2.配置webpack
打开config/webpack.config.js
1)在 module.exports 导出函数前面引入插件

// gzip插件
const CompressionPlugin = require("compression-webpack-plugin");

2)添加配置
位置,搜索new HtmlWebpackPlugin(在其上边添加配置

	plugins: [
      // gzip配置项
      new CompressionPlugin({
        filename: "[path][base].gz",
        algorithm: "gzip", // 算法
        test: new RegExp("\\.(js|css)$"), // 压缩 js 与 css
        threshold: 1024, // 只处理比这个值大的资源。按字节计算 10240
        minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
      }),

      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值