Nén JavaScript online: công cụ làm gì, tiết kiệm được bao nhiêu và khi nào không nên dùng
Công cụ nhận đoạn JavaScript bạn dán vào, bỏ chú thích, gộp khoảng trắng và cắt các dấu cách quanh ký tự ngăn cách rồi trả về bản một dòng kèm bảng so sánh độ dài trước và sau. Đây là kiểu nén an toàn ở mức cơ bản, không đổi tên biến và không phân tích cú pháp, nên nhanh nhưng có vài trường hợp cần cẩn thận.
Tính năng nổi bật
- Hai ô song song: mã gốc bên trái, bản đã nén bên phải
- Bỏ chú thích một dòng bắt đầu bằng hai dấu gạch chéo và chú thích nhiều dòng
- Gộp mọi chuỗi khoảng trắng, tab và ký tự xuống dòng thành một dấu cách
- Cắt dấu cách bao quanh các ký tự ngoặc nhọn, ngoặc đơn, chấm phẩy, dấu phẩy và dấu hai chấm
- Bỏ dấu chấm phẩy đứng ngay trước dấu ngoặc nhọn đóng
- Bảng thống kê ba số: độ dài gốc, độ dài sau nén và phần trăm tiết kiệm
- Nút chép kết quả vào bộ nhớ tạm bằng một lần bấm
- Toàn bộ xử lý chạy trên trình duyệt, mã nguồn bạn dán vào không gửi lên máy chủ
Vì sao vẫn cần một công cụ nén thủ công khi build tool đã tự nén
Nếu dự án của bạn chạy qua Webpack, Vite hay Next.js thì bước nén đã có sẵn trong lệnh build và bạn không cần công cụ này cho mã sản phẩm. Nhưng vẫn còn rất nhiều tình huống không có quy trình build: một đoạn mã theo dõi dán thẳng vào thẻ script của trang WordPress, một tệp JavaScript nhỏ đặt trong thư mục tĩnh của website HTML thuần, một đoạn mã nhúng gửi cho khách hàng dán vào trang đích, hay một hàm tiện ích viết nhanh cần đưa vào ô cấu hình có giới hạn ký tự. Trong những trường hợp đó, mở một trang web và dán mã vào nhanh hơn nhiều so với cài đặt cả bộ công cụ. Điểm cần nhớ là công cụ này nén theo cách đơn giản, hợp với đoạn mã ngắn và độc lập, còn tệp lớn nhiều mô-đun thì nên để công cụ chuyên dụng làm.
Lợi ích khi sử dụng
- Nén nhanh một đoạn mã lẻ mà không phải dựng quy trình build
- Thấy ngay mức giảm bằng con số thay vì phải đoán
- Mã nguồn không rời khỏi trình duyệt nên dùng được với mã nội bộ
- Kết quả một dòng tiện dán vào các ô cấu hình có giới hạn ký tự
- Không cần đăng ký, không giới hạn số lần dùng
Cách nén một đoạn JavaScript
- 1Dán đoạn mã cần nén vào ô JavaScript gốc bên trái, nên dán bản đã chạy đúng chứ không phải bản đang sửa dở.
- 2Bấm nút Minify JavaScript để công cụ xử lý và đổ kết quả sang ô bên phải.
- 3Đọc ba con số ở bảng thống kê để biết bản nén giảm được bao nhiêu so với bản gốc.
- 4Bấm biểu tượng chép ở góc ô kết quả để lấy mã đã nén.
- 5Chạy thử bản nén trong môi trường thật trước khi đưa lên trang chính thức, và luôn giữ lại bản gốc để còn sửa về sau.
Công cụ nén bằng cách nào và cố tình không làm gì
Toàn bộ việc nén ở đây dựa trên năm phép thay thế theo biểu thức chính quy chạy nối tiếp nhau. Bước một xóa phần còn lại của dòng kể từ hai dấu gạch chéo. Bước hai xóa mọi khối nằm giữa dấu mở và dấu đóng chú thích nhiều dòng. Bước ba gộp mọi chuỗi khoảng trắng liên tiếp, gồm cả tab và ký tự xuống dòng, thành đúng một dấu cách. Bước bốn cắt dấu cách bao quanh các ký tự ngoặc nhọn, ngoặc đơn, chấm phẩy, dấu phẩy và dấu hai chấm. Bước năm bỏ dấu chấm phẩy đứng ngay trước ngoặc nhọn đóng. Thứ công cụ cố tình không làm mới là điều quan trọng: nó không dựng cây cú pháp, không đổi tên biến thành một ký tự, không gỡ nhánh mã không bao giờ chạy tới, không gộp khai báo biến, không rút gọn biểu thức hằng. Đó chính là những kỹ thuật giúp Terser hay esbuild giảm được nhiều hơn hẳn. Đổi lại, cách làm ở đây không đụng tới cấu trúc chương trình nên rủi ro thấp hơn, và nó xử lý được cả cú pháp mới mà một công cụ phân tích cũ có thể báo lỗi.
Ba tình huống khiến bản nén chạy sai, phải kiểm tra trước khi dùng
Thứ nhất là hai dấu gạch chéo nằm trong chuỗi ký tự. Dòng gán một địa chỉ web dạng chuỗi có chứa dấu hai gạch chéo sau tên giao thức sẽ bị cắt cụt từ vị trí đó tới hết dòng, khiến chuỗi mất dấu nháy đóng và mã báo lỗi cú pháp ngay. Đây là lỗi hay gặp nhất, và may là nó lộ ra lập tức chứ không âm thầm. Thứ hai là biểu thức chính quy viết theo lối chữ, vì dấu gạch chéo mở đầu có thể bị hiểu nhầm thành chú thích, nhất là khi mẫu bên trong cũng chứa dấu gạch chéo. Thứ ba là chuỗi mẫu viết bằng dấu huyền có xuống dòng hoặc thụt lề bên trong: những khoảng trắng đó là nội dung thật của chuỗi, nhưng bước gộp khoảng trắng vẫn ép chúng thành một dấu cách, nên văn bản in ra sẽ khác bản gốc mà chương trình vẫn chạy bình thường. Loại lỗi thứ ba nguy hiểm nhất vì nó không báo gì cả. Trước khi dùng, hãy tìm nhanh trong mã xem có ba thứ này không.
Xuống dòng bị gộp và chuyện dấu chấm phẩy tự động
JavaScript cho phép bỏ dấu chấm phẩy cuối câu lệnh vì bộ phân tích tự chèn giúp khi gặp ký tự xuống dòng ở vị trí hợp lệ. Nhiều dự án theo phong cách này, và mã của họ chỉ chạy đúng nhờ những ký tự xuống dòng đó. Khi công cụ gộp mọi ký tự xuống dòng thành dấu cách, chỗ dựa ấy biến mất và hai câu lệnh liền nhau có thể dính lại thành một biểu thức khác hẳn nghĩa. Trường hợp kinh điển là một dòng kết thúc bằng tên biến rồi dòng sau mở đầu bằng dấu ngoặc đơn hoặc dấu ngoặc vuông: sau khi gộp, phần sau bị hiểu thành lời gọi hàm hoặc truy cập phần tử của dòng trước. Một trường hợp khác là từ khóa trả về đứng riêng một dòng còn giá trị nằm ở dòng dưới. Cách phòng tránh rất đơn giản: chạy công cụ định dạng mã của bạn với tùy chọn luôn thêm dấu chấm phẩy trước, hoặc chỉ nén những tệp vốn đã kết thúc câu lệnh bằng dấu chấm phẩy đầy đủ.
Đọc con số phần trăm tiết kiệm cho đúng
Ba con số trong bảng thống kê là số ký tự chứ không phải số byte trên đĩa, dù nhãn ghi là bytes. Với mã chỉ gồm ký tự Latin thì hai con số này trùng nhau, nhưng nếu trong mã có chuỗi tiếng Việt có dấu thì mỗi chữ có dấu chiếm hai đến ba byte khi lưu theo bảng mã UTF-8, còn ở đây vẫn được đếm là một. Vì vậy tệp thật trên máy chủ sẽ lớn hơn con số hiển thị. Điểm thứ hai quan trọng hơn: mức tiết kiệm phụ thuộc gần như hoàn toàn vào việc mã gốc có nhiều chú thích và thụt lề hay không. Một tệp viết dày, ít chú thích, đã qua công cụ định dạng với thụt lề hai dấu cách sẽ giảm rất ít, trong khi một tệp có khối chú thích tài liệu dài ở đầu mỗi hàm có thể giảm quá nửa. Đừng lấy phần trăm ở đây làm thước đo chất lượng mã, nó chỉ nói lên tỷ lệ ký tự trang trí trong tệp gốc.
Nén mã chỉ là một lớp, phần lớn mức giảm nằm ở lớp nén khi truyền
Khi trình duyệt tải một tệp JavaScript, máy chủ thường nén nội dung bằng gzip hoặc brotli trước khi gửi đi, và trình duyệt tự giải nén. Hai lớp này khác nhau về bản chất: nén mã bỏ đi các ký tự thật sự thừa, còn nén khi truyền thay thế các mẫu lặp lại bằng tham chiếu ngắn hơn. Vì mã nguồn có rất nhiều mẫu lặp, lớp nén khi truyền thường cho mức giảm lớn hơn nhiều so với việc bỏ khoảng trắng. Nghĩa là nếu máy chủ của bạn chưa bật gzip hoặc brotli thì đó mới là việc cần làm đầu tiên, trước cả chuyện nén mã. Kiểm tra bằng tab Network trong công cụ dành cho nhà phát triển của trình duyệt, xem tiêu đề phản hồi có dòng content-encoding hay không. Sau lớp đó, thứ tự ưu tiên tiếp theo thường là chia nhỏ gói mã theo trang, hoãn tải các thư viện không cần cho lần vẽ đầu tiên bằng thuộc tính defer, rồi mới đến việc nén sâu bằng công cụ có đổi tên biến.
Câu hỏi thường gặp (FAQ)
Vì sao mã sau khi nén báo lỗi thiếu dấu nháy đóng?
Gần như chắc chắn trong mã có một chuỗi chứa hai dấu gạch chéo, thường là địa chỉ web viết đầy đủ giao thức. Công cụ hiểu nhầm đó là mở đầu chú thích nên xóa từ vị trí đó tới hết dòng. Cách xử lý là tách phần địa chỉ ra biến riêng và ghép chuỗi, hoặc dùng công cụ nén có phân tích cú pháp thật.
Công cụ có đổi tên biến cho ngắn lại không?
Không. Đây là kiểu nén chỉ thao tác trên ký tự, không dựng cây cú pháp nên không thể biết biến nào an toàn để đổi tên. Vì vậy mức giảm thấp hơn Terser hay esbuild, đổi lại nó không bao giờ làm hỏng mã do đổi nhầm tên biến toàn cục hoặc tên thuộc tính được gọi bằng chuỗi.
Mã có cú pháp mới như toán tử truy cập tùy chọn có nén được không?
Được, vì công cụ không phân tích cú pháp mà chỉ thay thế theo mẫu ký tự. Điều này lại là lợi thế so với các công cụ phân tích phiên bản cũ vốn báo lỗi khi gặp cú pháp chưa hỗ trợ. Nhưng đổi lại nó cũng không kiểm tra được mã của bạn có hợp lệ hay không.
Chuỗi mẫu viết bằng dấu huyền có bị ảnh hưởng không?
Có, và đây là trường hợp nguy hiểm vì không báo lỗi. Mọi ký tự xuống dòng và thụt lề bên trong chuỗi mẫu là nội dung thật, nhưng bước gộp khoảng trắng vẫn ép chúng thành một dấu cách. Kết quả in ra sẽ mất định dạng nhiều dòng trong khi chương trình vẫn chạy bình thường.
Tôi bỏ dấu chấm phẩy cuối câu lệnh, có nén được không?
Rủi ro cao. Mã theo phong cách này dựa vào ký tự xuống dòng để bộ phân tích tự chèn dấu chấm phẩy, mà công cụ thì gộp hết xuống dòng thành dấu cách. Hãy chạy công cụ định dạng với tùy chọn luôn thêm dấu chấm phẩy trước rồi mới nén, hoặc dùng công cụ nén chuyên dụng.
Nén rồi có cần bật gzip trên máy chủ nữa không?
Rất cần, và thứ tự ưu tiên còn ngược lại. Nén khi truyền bằng gzip hoặc brotli thường giảm được nhiều hơn hẳn việc bỏ khoảng trắng, vì mã nguồn chứa rất nhiều mẫu lặp. Hãy kiểm tra tiêu đề content-encoding trong tab Network của trình duyệt, nếu chưa có thì bật lớp này trước đã.
Ba con số trong bảng thống kê là byte thật à?
Là số ký tự. Nếu mã chỉ chứa ký tự Latin thì trùng với số byte, nhưng nếu có chuỗi tiếng Việt có dấu thì mỗi chữ có dấu chiếm hai đến ba byte khi lưu theo UTF-8 mà ở đây vẫn tính là một. Tệp thật trên đĩa sẽ lớn hơn con số hiển thị.
Mã nguồn tôi dán vào có bị gửi đi đâu không?
Không. Cả năm phép thay thế chạy bằng JavaScript ngay trong trình duyệt của bạn, không có lời gọi mạng nào và không có gì được lưu lại. Đóng tab là nội dung biến mất, nên bạn dùng được với mã nội bộ hoặc mã chưa công bố.
Có nên lưu bản nén vào kho mã nguồn không?
Không nên. Bản nén là kết quả sinh ra, nên để công cụ build tạo lại mỗi lần phát hành. Nếu đưa vào kho thì mọi lần sửa sẽ tạo ra một khác biệt khổng lồ trên một dòng, không ai xem lại được, và sớm muộn bản nén cũng lệch với bản gốc.
Bản đồ nguồn là gì và công cụ này có tạo không?
Bản đồ nguồn là tệp đi kèm giúp trình duyệt quy chiếu vị trí lỗi trong bản nén về đúng dòng trong bản gốc. Công cụ này không tạo tệp đó. Nếu bạn cần gỡ lỗi trên môi trường thật, hãy nén bằng Terser hoặc esbuild trong quy trình build vì chúng xuất bản đồ nguồn kèm theo.
Nén được tệp lớn cỡ nào?
Không có giới hạn cứng, nhưng vì mọi thứ chạy trong trình duyệt và kết quả đổ vào một ô văn bản nên tệp vài trăm nghìn ký tự sẽ làm trang giật khi hiển thị. Với tệp thư viện lớn, dùng công cụ dòng lệnh vẫn nhanh và an toàn hơn nhiều.
Nén JavaScript có bảo vệ được mã nguồn không?
Không. Bản nén chỉ khó đọc hơn chứ vẫn là mã chạy được, chỉ cần bấm nút định dạng lại trong công cụ dành cho nhà phát triển là đọc được gần như bản gốc. Đừng đặt khóa bí mật hay logic nhạy cảm trong mã chạy ở trình duyệt, dù có nén hay làm rối tới đâu.
Từ khóa liên quan
- nén javascript online
- js minifier online
- minify js miễn phí
- công cụ nén file js
- giảm dung lượng file javascript
- compress javascript online
- javascript minifier tiếng việt
- nén code js không cần cài đặt
- terser là gì
- esbuild minify
- bản đồ nguồn source map
- gzip brotli cho file js
- dấu chấm phẩy tự động javascript
- lỗi minify javascript
- tối ưu tốc độ tải trang
- minify js cho wordpress
- nén script nhúng landing page
- javascript minifier online free
- chú thích javascript
- công cụ nén js miễn phí
