Nén JavaScript

Đổi tên, xóa bỏ, và những gì tuyệt đối không được đụng vào

Có ba việc diễn ra, theo thứ tự tăng dần về mức tiết kiệm và cái giá bạn phải trả. Khoảng trắng và chú thích bị xóa, việc này chẳng tốn gì. Mã chết bị xóa — một nhánh không bao giờ chạy, một biến được gán mà không bao giờ được đọc. Và tên cục bộ được rút ngắn, nên một cái tên được đặt cẩn thận như calculateMonthlyTotal trở thành một chữ cái. Việc cuối cùng này mang lại phần lớn dung lượng tiết kiệm, và cũng là thứ khiến kết quả khó đọc — không sao khi phát hành nhưng vô dụng khi gỡ lỗi.

Những gì không thể đổi tên là bất cứ thứ gì bên ngoài tham chiếu đến bằng tên, và làm sai điều này là cách các công cụ nén làm hỏng mã. Hàm được export, thuộc tính đối tượng được truy cập bằng chuỗi, mọi thứ truy cập qua window, và tên dùng trong eval đều phải được giữ nguyên, vì có thứ gì đó ở nơi khác đang tìm chúng theo đúng cái tên bạn đã viết. Thuộc tính nói riêng được mặc định để nguyên: đổi tên user.emailAddress sẽ gây lỗi ngay khi đối tượng đó được chuyển thành JSON hoặc được đọc bởi đoạn mã được nén riêng.

Hãy giữ source map hoặc bản gốc. Khi tên đã mất, một stack trace từ người dùng thực tế sẽ chỉ báo lỗi ở hàm t tại ký tự 48.213, và điều đó chẳng cho bạn biết gì cả. Source map khôi phục tên gốc và số dòng trong trình gỡ lỗi lẫn trong báo cáo lỗi, và tạo nó không tốn gì vì nó đi kèm dưới dạng một file riêng, chỉ tải khi có người mở công cụ dành cho nhà phát triển.

Chú thích giấy phép mặc định được giữ lại, và đó là một lập trường pháp lý chứ không phải sở thích. Rất nhiều mã nguồn mở được cấp phép thoáng với một điều kiện duy nhất là thông báo bản quyền phải đi kèm với nó — MIT và BSD đều nói rõ như vậy. Xóa những chú thích đó khỏi một bundle chứa mã của bên thứ ba là vi phạm chính giấy phép đã cho phép bạn dùng nó. Chúng chỉ tốn vài trăm byte.

Khi bạn cần công cụ khác

Việc này nên nằm trong bước build thay vì trong một tab trình duyệt, và các bundler hiện đại đều làm sẵn. esbuild --minify cùng Rollup hoặc Vite nén khi build, tự động tạo source map, và — quan trọng hơn nhiều — thực hiện tree shaking, loại bỏ những export của các thư viện phụ thuộc mà bạn không bao giờ import. Trên một ứng dụng thực tế, điều đó tiết kiệm nhiều hơn hẳn so với việc nén một file đã hoàn chỉnh.

Trước khi tối ưu, hãy đo đạc. Một công cụ phân tích bundle thường sẽ cho thấy một thư viện lớn chiếm phần lớn file — một thư viện ngày tháng, một bộ icon, một gói vẽ biểu đồ được kéo vào toàn bộ chỉ để vẽ một biểu đồ. Thay thế hoặc tải trễ thư viện đó hiệu quả hơn mọi mức nén, và code splitting để mỗi trang chỉ tải những gì nó cần còn hiệu quả hơn cả hai.