首页
前端开发
Webpack
使用compression-webpack-plugin创建gzip资源优化Web性能

使用compression-webpack-plugin创建gzip资源优化Web性能

0 次浏览 0 条评论
zip
zip

compression-webpack-plugin 是一个用于生成压缩版本资源（如 .zip、.gz）的 Webpack 插件，能够提升前端资源加载效率。

安装插件

使用 npm 安装：

npm i -D compression-webpack-plugin

在 Webpack 中使用

修改 webpack.config.js 文件，引入并配置插件：

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      filename: '[path][base].gz',
      algorithm: 'gzip',
      test: /.js$|.css$|.html$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
};

插件功能说明

  • 准备压缩的资产版本：插件会自动检测指定类型的资源并生成压缩版本。
  • 内容编码优化：压缩后的资源可由服务器支持的编码方式提供，如 gzip。
  • 提升加载速度：减小文件体积，提升网页加载效率。

使用该插件时，需确保服务器配置支持 gzip 或 brotli 格式。

zip 文件大小：212.77KB