CompressionWebpackPlugin—提高 Web 应用性能的利器

笔记+分享

在现代 Web 开发中，优化资源加载速度是提升用户体验的重要环节。减少文件大小可以显著提升网页加载速度，从而改善用户体验。CompressionWebpackPlugin 是一个强大的 Webpack 插件，它可以在构建过程中自动压缩资源文件，为浏览器提供更小的文件。本文将详细介绍 CompressionWebpackPlugin 的功能、配置和使用方法，帮助你优化 Web 应用的性能。

什么是 CompressionWebpackPlugin？

CompressionWebpackPlugin 是一个用于 Webpack 的插件，能够在构建过程中生成压缩文件（例如 .gz 和 .br 文件）。这些压缩文件可以显著减少资源文件的大小，从而加快网页的加载速度。浏览器会优先请求这些压缩文件，减少传输数据量，提高页面响应速度。

为什么选择 CompressionWebpackPlugin？

自动化压缩：在构建过程中自动生成压缩文件，无需手动处理。支持多种压缩格式：支持 gzip、brotli 等多种压缩格式，灵活应对不同的浏览器和网络环境。易于集成：与 Webpack 无缝集成，只需简单配置即可使用。提升性能：显著减少资源文件大小，加快网页加载速度，提高用户体验。

安装 CompressionWebpackPlugin

首先，在项目中安装 compression-webpack-plugin：

bash复制代码npm install compression-webpack-plugin --save-dev

配置 Webpack

在 webpack.config.js 文件中配置 CompressionWebpackPlugin。以下是一个简单的示例：

javascript复制代码const CompressionWebpackPlugin = require('compression-webpack-plugin');module.exports = { mode: 'production', plugins: [ new CompressionWebpackPlugin({ filename: '[path][base].gz', // 输出文件名 algorithm: 'gzip', // 压缩算法 test: /\.(js|css|html|svg)$/, // 匹配需要压缩的文件类型 threshold: 10240, // 只处理大于 10KB 的文件 minRatio: 0.8, // 只有压缩率小于 0.8 的文件才会被处理 deleteOriginalAssets: false, // 是否删除原始文件 }), ],};

详细配置选项

CompressionWebpackPlugin 提供了丰富的配置选项，可以根据具体需求进行调整。以下是一些常用配置：

filename：输出文件名格式。支持使用 [path]、[base]、[name] 和 [ext] 等占位符。algorithm：压缩算法，默认为 gzip，也可以使用 brotliCompress 等其他算法。test：匹配需要压缩的文件类型。可以是正则表达式、数组或函数。threshold：只有文件大小大于这个值的文件才会被压缩，单位为字节。minRatio：只有压缩率小于这个值的文件才会被处理。deleteOriginalAssets：是否删除原始未压缩的资源文件。

以下是一个更为复杂的配置示例，使用了 gzip 和 brotli 两种压缩算法：

javascript复制代码const CompressionWebpackPlugin = require('compression-webpack-plugin');const zlib = require('zlib');module.exports = { mode: 'production', plugins: [ new CompressionWebpackPlugin({ filename: '[path][base].gz', algorithm: 'gzip', test: /\.(js|css|html|svg)$/, threshold: 10240, minRatio: 0.8, deleteOriginalAssets: false, }), new CompressionWebpackPlugin({ filename: '[path][base].br', algorithm: 'brotliCompress', test: /\.(js|css|html|svg)$/, compressionOptions: { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11, // brotli 压缩质量 }, }, threshold: 10240, minRatio: 0.8, deleteOriginalAssets: false, }), ],};

配置服务器

为了让浏览器能够正确请求到压缩后的文件，你需要在服务器上进行相应的配置。以下是 Nginx 和 Apache 的配置示例：

Nginx 配置

nginx复制代码http { gzip on; gzip_types text/plain application/xml text/css text/javascript application/javascript application/x-javascript; server { listen 80; server_name your_domain.com; location / { try_files $uri $uri/ /index.html; } location ~* \.(js|css|html|svg)$ { gzip_static on; # 启用静态 gzip 文件支持 expires max; add_header Cache-Control public; add_header Content-Encoding gzip; } location ~* \.br$ { add_header Content-Encoding br; expires max; } }}

Apache 配置

apache复制代码<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css text/javascript application/javascript application/x-javascript</IfModule><IfModule mod_headers.c> <FilesMatch "\.(js|css|html|svg)$"> Header set Content-Encoding gzip </FilesMatch> <FilesMatch "\.br$"> Header set Content-Encoding br </FilesMatch></IfModule><IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP:Accept-Encoding} gzip RewriteCond %{REQUEST_FILENAME}\.gz -s RewriteRule ^(.*)\.(js|css|html|svg)$ $1\.$2\.gz [QSA] RewriteCond %{HTTP:Accept-Encoding} br RewriteCond %{REQUEST_FILENAME}\.br -s RewriteRule ^(.*)\.(js|css|html|svg)$ $1\.$2\.br [QSA]</IfModule><IfModule mod_mime.c> AddEncoding gzip .gz AddEncoding br .br</IfModule>

验证压缩效果

使用 CompressionWebpackPlugin 后，你可以通过以下方法验证压缩效果：

浏览器开发者工具：打开开发者工具（按 F12 或 Ctrl+Shift+I），在“网络”（Network）标签中查看请求的资源文件，检查 Content-Encoding 头部是否为 gzip 或 br。

命令行工具：使用 curl 命令检查服务器响应头。例如：

bash复制代码curl -I -H "Accept-Encoding: gzip" http://your_domain.com/path/to/your/file.js

性能分析工具：使用 Lighthouse 或 WebPageTest 等工具进行性能分析，查看页面加载时间和资源文件大小。

总结

CompressionWebpackPlugin 是一个强大且易于使用的 Webpack 插件，可以显著减少资源文件的大小，提高网页加载速度。通过合理配置 CompressionWebpackPlugin，并在服务器上进行相应的配置，你可以大幅提升 Web 应用的性能和用户体验。