Build Tools – Tích hợp Brotli Compression bằng Webpack

Brotli là Cái Gì?

Brotli là một thuật toán nén mới và được Google phát triển vào năm 2016. Nó sẽ có khả năng nén tốt hơn so với chuẩn nén Gzip khoản 20% - 26%.

Do vậy, các website khi được nén bởi Brotli sẽ giúp người dùng truy cập website nhanh hơn và đồng thời giảm tải cho Server đi khá nhiều.

Hầu hết các trình duyệt hiện nay đều hỗ trợ chuẩn nén Brotli nên các anh em không cần phải lo lắng khi chuyển qua sử dụng Brotli nhé.

Đây là link bài viết gốc của mình ahihi

https://hungphamdevweb.com/build-tools-tich-hop-brotli-compression-bang-webpack.html

Cách Integrate Brotli bằng Webpack

Đầu tiên các anh em cần phải chắc chắn rằng Server của các anh em có hỗ trợ chuẩn Brotli không? (bằng việc sử dụng Brotli test tool để verify).

Điều này là cần thiết để xác nhận Server có thể hoạt động được với file nén Brotli hay không.

Nếu Server các anh em không hỗ trợ Brotil hãy cài đặt thêm module ngx_brotli cho Web Server đang sử dụng Nginx và đừng quên set brotli_static thành "on" (điều này sẽ giúp Web Server kiểm tra request trước khi gửi đến người dùng)

Mình đã check thử và website mình đã hỗ trợ chuẩn Brotli.

Để bắt đầu chúng ta cần phải cài đặt gói brotli-gzip-webpack-plugin bằng command bên dưới:

npm i --save-dev brotli-gzip-webpack-plugin

Sau đó config một tí trong file webpack.config.js như sau:

var BrotliGzipPlugin = require('brotli-gzip-webpack-plugin');
module.exports = {
  plugins: [
    new BrotliGzipPlugin({
      asset: '[path].br[query]',
      algorithm: 'brotli',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8
      quality: 11
    }),
    new BrotliGzipPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8
     })
  ]
}

Tuỳ chỉnh biến quality để tăng giảm chất lượng nén của Brotli. Mặc định giá trị sẽ là 11 và cũng là giá trị cao nhất trong cấu hình config.

Sau khi chúng ta đã config xong thì các anh chạy command bên dưới để run Webpack:

npx webpack --config webpack.config.js

Sau khi hoàn tất, Webpack sẽ tạo một file uncompressed bundle.js, một file bundle.js.br và một file bundle.js.gz.

Như các anh thấy thì file nén của Brolti có dung lượng tầm 74.8KB nhỏ hơn rất nhiều so với khi chúng ta nén bằng Gzip.

Lợi ích khi Integrate Brotli bằng Webpack

Nếu sử dụng module ngx_brotli một mình, mỗi khi có request Server cần phải tốn thời gian để nén tài nguyên website trước khi gửi đến người dùng.

Thay vào đó việc sử dụng Webpack để tạo sẵn những file được nén từ trước sẽ giảm thời gian thực thi của Server đi đáng kể.

Mọi thắc mắc vui lòng để lại bình luận bên dưới nhé, thân chào và quyết thắng