Brotli压缩算法的vue打包与Nginx配置

Brotli压缩算法在Vue打包与Nginx配置中的实践

Brotli压缩算法由Google开发，因其高效的压缩率和广泛的主流浏览器支持，成为优化网站性能的理想选择。以下是在Vue项目和Nginx服务器中配置Brotli的详细步骤。

1. 安装依赖在Vue项目中，首先需要安装compression-webpack-plugin插件：

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

2. 配置vue.config.js在项目根目录下的vue.config.js文件中，添加Brotli压缩配置：

   const isProduction = process.env.NODE_ENV !== 'development';const CompressionWebpackPlugin = require('compression-webpack-plugin');const compressResourceType = ['html', 'js', 'css'];module.exports = { configureWebpack: config => { if (isProduction) { config.plugins.push( new CompressionWebpackPlugin({ algorithm: 'brotliCompress', compressionOptions: { level: 11 }, test: new RegExp( '.(' + compressResourceType.join('|') + ')$' ), threshold: 10240, // 仅压缩大于10KB的文件 minRatio: 0.8, // 压缩率阈值 deleteOriginalAssets: false // 保留原始文件 }) ); } }};

3. 打包项目运行以下命令进行生产环境打包：

   $Env:NODE_OPTIONS="--openssl-legacy-provider" # Windows环境可能需要此配置npm run build

1. 下载Brotli模块源码

   cd /usr/srcgit clone
   https://github.com/google/ngx_brotli.gitcd
   /usr/src/ngx_brotli/deps && rm -rf brotligit clone
   https://github.com/google/brotli.gitcd
   /usr/src/ngx_brotli && git submodule update --init

2. 下载Nginx源码并编译模块

   wget
   http://nginx.org/download/nginx-1.20.1.tar.gztar
   -xvf nginx-1.20.1.tar.gzcd nginx-1.20.1./configure --with-compat --add-dynamic-module=/usr/src/ngx_brotlimake modules

3. 验证编译结果检查生成的.so文件：

   ls objs/*.so# 应输出：# objs/ngx_http_brotli_filter_module.so# objs/ngx_http_brotli_static_module.so

4. 修改Nginx配置

   加载动态模块在nginx.conf顶部添加：

   load_module /path/to/ngx_http_brotli_filter_module.so;load_module /path/to/ngx_http_brotli_static_module.so;

   启用Brotli压缩在http块中配置：

   http { # Brotli配置 brotli on; brotli_comp_level 6; # 压缩级别（1-11） brotli_buffers 16 8k; # 缓冲区设置 brotli_min_length 20; # 最小压缩文件大小 brotli_types text/plain text/css application/json application/javascript text/xml image/svg+xml;}

5. 重载Nginx配置

   nginx -s reload

1. 检查响应头访问网站并打开浏览器开发者工具，查看网络请求的Content-Encoding是否为br。

   

2. 性能对比使用工具（如WebPageTest）测试Brotli与gzip的压缩率差异，通常Brotli可减少约15%-25%的文件大小。

1. 兼容性

   确保服务器和客户端均支持Brotli（现代浏览器如Chrome、Firefox已支持）。

   可通过brotli_static on优先发送预压缩的.br文件。

2. 动态内容对于动态生成的内容（如API响应），需确保Nginx配置中包含正确的MIME类型（如application/json）。

3. 调试若配置未生效，检查Nginx错误日志：

   tail -f /var/log/nginx/error.log

通过以上步骤，您的Vue项目和Nginx服务器将成功启用Brotli压缩，显著提升页面加载速度。