Sự khác biệt giữa Minification và Gzipping


Bạn làm cả 2 với các tài sản (assets) trên website của mình (những thứ giống như các file css và js). Cả hai đều giảm kích thước của file, giúp cho việc truyền các tài sản giữa server và trình duyệt thông qua mạng  hiệu quả hơn. Điều này giúp tăng hiệu suất.» Hướng dẫn tăng tốc website từ A đến Z
» Varnish Cache là gì?
» Vì sao duyệt Web ngày càng chậm?

Nhưng 2 cách này rất khác nhau. Nếu bạn chưa biết điều đó, nó rất đáng giá để tìm hiểu.

Minification làm những việc như xóa bỏ khoảng trắng, comment, các dấu chấm phẩy không cần thiết, giảm độ dài mã hex, ...

và những thứ tương tự. Code vẫn giữ nguyên tính hợp lệ. Bạn sẽ không muốn thử đọc hoặc làm việc với các file đã được minification, nhưng nó không phá vỡ bất kỳ quy tắc nào. Trình duyệt có thể đọc và sử dụng nó giống như file gốc (file chưa minification).

Minification tạo ra file mới, cái bạn sẽ sử dụng trong phiên bản production. Ví dụ, bạn tạo một file 'style.css' để làm việc trong quá trình phát triển. Sau đó bạn minify nó thành 'style.min.css' trong bản production.

Gzipping tìm tất cả các chuỗi lặp lại và thay thế chúng với các con trỏ, trỏ tới trường hợp đầu tiên được tìm thấy.

Julia Evans đã nghĩ ra một cách tuyệt vời, để giải thích điều này (xem bài viết và video của cô ấy). Hãy xem đoạn văn sau:

Các chuỗi trong dấu ngoặc nhọn đã được gzip phát hiện là lặp lại. Vì thế nó sẽ được thay thế với một con trỏ, cái sử dụng ít khoảng trống hơn so với chuỗi.

 Điều này cực kỳ hiệu quả trong việc giảm kích thước file, đặc biệt với code, khi code được lặp lại rất nhiều. Tưởng tượng có nhất nhiều chuỗi 

Bạn có thể tạo ra một phiên bản gzip của các file (ví dụ style.css.zip) nhưng bạn hiếm khi làm điều đó và trình duyệt cũng không thể đọc nó.

Trên web, gzipping được thực hiện trực tiếp tại server. Chúng ta, cần cấu hình server để làm điều đó. Khi đã cấu hình xong, gzipping tự động chạy, bạn không cần phải làm bất kỳ việc gì. Server nén file và gửi nó qua mạng. Trình duyệt nhận các file và unzipped trước khi sử dụng nó. Tôi chưa từng nghe thấy ai đề cập bất cứ điều gì về việc quá tải khi zipping và unzipping, vì thế tôi giả sử rằng nó không đáng kể và lợi ích đem lại vượt xa so với chi phí bỏ ra.

Ví dụ

Chúng tôi sử dụng file CSS của Bootstrap

Bạn giảm được 17% với minifying, 85% với gzipping hoặc 86% nếu bạn làm cả hai.

Bạn có thể kiểm tra bằng cách sử dụng DevTools:

Gzipping hiệu quả hơn Minification rất nhiều. Và lý tưởng nhất là làm cả hai.

Gzipping giảm kích thước file khoảng 5 lần so với minifying. Nhưng, bạn cũng nên minifying, nó chỉ yêu cầu thêm một chút nỗ lực trong bước build.

Cũng có một số bằng chứng cho thấy trình duyệt có thể đọc và phân tích một file đã được minify nhanh hơn.

Caching các tài sản cũng liên quan tới chủ đề này, không có gì nhanh hơn khi trình duyệt không cần gửi request để lấy một tài sản!. Có rất nhiều bài viết về chủ này trên web (hoặc sách).

Theo techmaster.vn


» Khắc phục tất cả các vấn đề trên trang web của bạn

Có thể bạn quan tâm
05/04/2017
640