您的当前位置:首页正文

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

2024-10-28 来源:个人技术集锦

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

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

什么是 CompressionWebpackPlugin?

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

为什么选择 CompressionWebpackPlugin?

安装 CompressionWebpackPlugin

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

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

配置 Webpack

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

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 两种压缩算法:

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 配置
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 配置
<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 后,你可以通过以下方法验证压缩效果:

  1. 浏览器开发者工具:打开开发者工具(按 F12Ctrl+Shift+I),在“网络”(Network)标签中查看请求的资源文件,检查 Content-Encoding 头部是否为 gzipbr

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

    
    curl -I -H "Accept-Encoding: gzip" http://your_domain.com/path/to/your/file.js
    
  3. 性能分析工具:使用 Lighthouse 或 WebPageTest 等工具进行性能分析,查看页面加载时间和资源文件大小。

总结

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

Top