如何在Angular 11中配置Brotli压缩？若不支持该压缩方式，有哪些替代解决方案？

Hey there! Let's dive into how to set up Brotli compression for your Angular 11 app, plus some solid alternatives if you hit any snags.

Angular 11 doesn't include built-in Brotli support, but we can add it by extending the default Webpack configuration using a custom builder. Here's how:

Step 1: Install Required Dependencies #

First, install the custom Webpack builder and the compression plugin:

npm install @angular-builders/custom-webpack compression-webpack-plugin --save-dev

Step 2: Create a Custom Webpack Config File #

Make a new file named webpack.config.js in your project root, and add this code to configure Brotli compression:

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

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      threshold: 8192, // Only compress files larger than 8KB
      minRatio: 0.8, // Compress only if the size ratio is below 0.8
      filename: '[path][base].br'
    })
  ]
};

Step 3: Update Angular.json to Use the Custom Builder #

Open your angular.json file, find the projects > [your-project-name] > architect > build section, and replace the default builder with the custom one. Also, add a reference to your Webpack config:

"builder": "@angular-builders/custom-webpack:browser",
"options": {
  "customWebpackConfig": {
    "path": "./webpack.config.js"
  },
  // Keep your existing options here (outputPath, index, main, etc.)
}

Step 4: Build and Deploy #

Run your production build as usual:

ng build --prod

You'll now see .br versions of your JS, CSS, HTML, and SVG files in the dist folder.

Important: Don't forget to configure your server to serve these Brotli files when the client supports it. For example, in Nginx, you'd enable the ngx_brotli module and add:

brotli_static on;
location ~* \.(js|css|html|svg)$ {
  add_header Content-Encoding br;
  add_header Vary Accept-Encoding;
}

If the custom Webpack setup feels too involved, here are other ways to get Brotli compression:

• Manual Post-Build Compression
  Install the brotli command-line tool (via npm install brotli -g or your system's package manager), then run this command after building your app:

  find dist -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" \) -exec brotli -z {} \;
  

  This generates .br files for all your static assets automatically.

• Server-Side Dynamic Compression
  Instead of pre-compressing files, configure your server to dynamically compress responses with Brotli. For Nginx, enable the ngx_brotli module and add:

  brotli on;
  brotli_types text/plain text/css application/javascript application/json image/svg+xml;
  

  Note: Dynamic compression uses more server resources than pre-compression, so it's better suited for smaller apps or low-traffic sites.

• Use a CDN
  Most modern CDNs automatically handle Brotli compression for your assets. Just deploy your Angular app to the CDN, and the CDN will serve compressed versions to supported clients without any extra work on your end.

内容的提问来源于stack exchange，提问作者Rajitha Rumesh Leelananda