性能优化-webpack配置gzip

最新推荐文章于 2024-10-23 17:09:33 发布

原创最新推荐文章于 2024-10-23 17:09:33 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#性能优化 #webpack #前端

web前端专栏收录该内容

9 篇文章

订阅专栏

通过安装compression-webpack-plugin并配置webpack，可以将1.3MB的JS压缩到363KB，体积减少约70%。步骤包括：1)使用Yarn添加插件；2)在webpack配置中引入并设置GZIP插件，指定压缩文件类型及阈值；3)调整压缩比率等参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(