Build Tools – Tích hợp Brotli Compression bằng Webpack
optimize
9
webpack
10
brotil
1
Gzip
1
White

Hùng Phạm viết ngày 22/06/2019

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 :smile_cat: :smile_cat: :smile_cat:

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

alt text

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)
alt text

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.

alt text

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 :smile_cat:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hùng Phạm

14 bài viết.
14 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
7 2
CSS Sprites thật ra đã là một cái tên khá cũ rồi và mình viết bài viết này hy vọng nó sẽ hữu ích cho các anh em nào chưa bao giờ biết đến cái tên c...
Hùng Phạm viết 7 tháng trước
7 2
White
4 2
Webpack là một cái tên không quá mới nhưng mình nghĩ không ít lần các anh em đã nghe qua nó. Nhiệm vụ chính của Webpack trong hệ thống là dùng để đ...
Hùng Phạm viết 7 tháng trước
4 2
White
4 0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
Hùng Phạm viết 6 tháng trước
4 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
14 bài viết.
14 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!