01-CompressionWebpackPlugin---提高 Web 应用性能的利器

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

条记+分享
在现代 Web 开发中，优化资源加载速率是提拔用户体验的告急环节。减少文件大小可以显著提拔网页加载速率，从而改善用户体验。CompressionWebpackPlugin 是一个强盛的 Webpack 插件，它可以在构建过程中主动压缩资源文件，为欣赏器提供更小的文件。本文将具体介绍 CompressionWebpackPlugin 的功能、配置和使用方法，帮助你优化 Web 应用的性能。
什么是 CompressionWebpackPlugin？

CompressionWebpackPlugin 是一个用于 Webpack 的插件，能够在构建过程中生成压缩文件（比方 .gz 和 .br 文件）。这些压缩文件可以显著减少资源文件的大小，从而加速网页的加载速率。欣赏器会优先请求这些压缩文件，减少传输数据量，提高页面相应速率。
为什么选择 CompressionWebpackPlugin？

• 主动化压缩：在构建过程中主动生成压缩文件，无需手动处理。
  
• 支持多种压缩格式：支持 gzip、brotli 等多种压缩格式，机动应对差别的欣赏器和网络情况。
  
• 易于集成：与 Webpack 无缝集成，只需简朴配置即可使用。
  
• 提拔性能：显著减少资源文件大小，加速网页加载速率，提高用户体验。
  

安装 CompressionWebpackPlugin

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

1. npm install compression-webpack-plugin --save-dev

复制代码

配置 Webpack

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

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

复制代码

具体配置选项

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

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

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

1. const CompressionWebpackPlugin = require('compression-webpack-plugin');
2. const zlib = require('zlib');
4. module.exports = {
5.     mode: 'production',
6.     plugins: [
7.         new CompressionWebpackPlugin({
8.             filename: '[path][base].gz',
9.             algorithm: 'gzip',
10.             test: /\.(js|css|html|svg)$/,
11.             threshold: 10240,
12.             minRatio: 0.8,
13.             deleteOriginalAssets: false,
14.         }),
15.         new CompressionWebpackPlugin({
16.             filename: '[path][base].br',
17.             algorithm: 'brotliCompress',
18.             test: /\.(js|css|html|svg)$/,
19.             compressionOptions: {
20.                 params: {
21.                     [zlib.constants.BROTLI_PARAM_QUALITY]: 11, // brotli 压缩质量
22.                 },
23.             },
24.             threshold: 10240,
25.             minRatio: 0.8,
26.             deleteOriginalAssets: false,
27.         }),
28.     ],
29. };

复制代码

配置服务器

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

1. http {
2.     gzip on;
3.     gzip_types text/plain application/xml text/css text/javascript application/javascript application/x-javascript;
5.     server {
6.         listen 80;
7.         server_name your_domain.com;
9.         location / {
10.             try_files $uri $uri/ /index.html;
11.         }
13.         location ~* \.(js|css|html|svg)$ {
14.             gzip_static on; # 启用静态 gzip 文件支持
15.             expires max;
16.             add_header Cache-Control public;
17.             add_header Content-Encoding gzip;
18.         }
20.         location ~* \.br$ {
21.             add_header Content-Encoding br;
22.             expires max;
23.         }
24.     }
25. }

复制代码

Apache 配置

1. <IfModule mod_deflate.c>
2.     AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css text/javascript application/javascript application/x-javascript
3. </IfModule>
5. <IfModule mod_headers.c>
6.     <FilesMatch "\.(js|css|html|svg)$">
7.         Header set Content-Encoding gzip
8.     </FilesMatch>
9.     <FilesMatch "\.br$">
10.         Header set Content-Encoding br
11.     </FilesMatch>
12. </IfModule>
14. <IfModule mod_rewrite.c>
15.     RewriteEngine on
16.     RewriteCond %{HTTP:Accept-Encoding} gzip
17.     RewriteCond %{REQUEST_FILENAME}\.gz -s
18.     RewriteRule ^(.*)\.(js|css|html|svg)$ $1\.$2\.gz [QSA]
20.     RewriteCond %{HTTP:Accept-Encoding} br
21.     RewriteCond %{REQUEST_FILENAME}\.br -s
22.     RewriteRule ^(.*)\.(js|css|html|svg)$ $1\.$2\.br [QSA]
23. </IfModule>
25. <IfModule mod_mime.c>
26.     AddEncoding gzip .gz
27.     AddEncoding br .br
28. </IfModule>

复制代码

验证压缩结果

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

• 欣赏器开发者工具：打开开发者工具（按 F12 或 Ctrl+Shift+I），在“网络”（Network）标签中查看请求的资源文件，检查 Content-Encoding 头部是否为 gzip 或 br。
  
• 命令行工具：使用 curl 命令检查服务器相应头。比方：
  
  2. curl -I -H "Accept-Encoding: gzip" http://your_domain.com/path/to/your/file.js

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

总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。