Tính Năng Chính Của Trình Thu Nhỏ JavaScript Này
- Nén JS tức thì trong trình duyệt (không tải tệp lên máy chủ)
- Loại bỏ nhận xét và thu gọn khoảng trắng/dòng mới không cần thiết
- Nén dựa trên AST tương tự Terser (gấp hằng số, loại bỏ mã chết trong điều kiện an toàn)
- Tùy chọn làm rối định danh và cờ nâng cao qua API hoặc tích hợp bản dựng
- Hoạt động với JavaScript hiện đại (ES2015+), tập lệnh cổ điển và đầu ra mô-đun đơn giản
- Sao chép hoặc tải xuống JavaScript đã thu nhỏ bằng một cú nhấp
- Sử dụng cùng thành phần cốt lõi với trình định dạng JavaScript: chuyển đổi giữa đầu ra được định dạng và thu nhỏ bằng một thao tác
- Xử lý 100% phía máy khách để bảo mật tối đa
🛠️ Cách Thu Nhỏ JavaScript for javascript-minifier
Dán hoặc Tải Lên JS Của Bạn
Thả tệp .js/.mjs vào trình soạn thảo hoặc dán JavaScript trực tiếp. Công cụ lý tưởng cho tập lệnh đơn, tệp tiện ích và gói nhỏ.
Chọn Chế Độ Thu Nhỏ
Sử dụng cùng thành phần với trình định dạng JavaScript: chuyển sang hành động Thu nhỏ để nhận đầu ra nén thay vì mã được định dạng.
Chạy Trình Thu Nhỏ
Mã của bạn được phân tích cú pháp thành AST, nhận xét và khoảng trắng thừa bị loại bỏ, và các bước nén an toàn được áp dụng để giảm kích thước gói.
Sao Chép hoặc Tải Xuống Kết Quả
Sao chép JavaScript đã thu nhỏ từ trình soạn thảo đầu ra hoặc tải xuống dưới dạng tệp .min.js và đưa vào HTML, CDN hoặc đầu ra bản dựng của bạn.
Thông Số Kỹ Thuật
Biến Đổi Cốt Lõi (Mặc Định An Toàn)
Mặc định bảo thủ được thiết kế để bảo toàn hành vi thời gian chạy trong khi giảm đáng kể kích thước mã.
| Thao Tác | Áp Dụng | Ghi Chú |
|---|---|---|
| Loại bỏ nhận xét dòng và khối | ✅ | Các bình luận giấy phép (/*! ... */) có thể được giữ lại thông qua cấu hình/API |
| Thu gọn khoảng trắng và dòng mới | ✅ | Khoảng trắng được chuẩn hóa khi an toàn về ngữ nghĩa; nội dung chuỗi và biểu thức chính quy được giữ nguyên |
| Gấp hằng số và nội tuyến đơn giản | ✅ | Chỉ khi kết quả được chứng minh tương đương |
| Loại bỏ mã chết | ✅ | Loại bỏ các nhánh không thể truy cập sau khi lan truyền hằng số |
| Xáo trộn định danh | ✅ Tùy chọn | Rút ngắn tên biến và hàm; có thể cấu hình qua tùy chọn nâng cao/API |
| Bỏ các công cụ gỡ lỗi (console/debugger) | ✅ Tùy chọn | Có thể bật khi bạn không phụ thuộc vào đầu ra console trong môi trường sản xuất |
Điều Khiển An Toàn & Tương Thích
Các tùy chọn nâng cao (chủ yếu được cung cấp qua công cụ xây dựng/API) giúp điều chỉnh mức độ thu nhỏ mã.
| Tùy chọn | Mặc định | Giải thích |
|---|---|---|
| mục tiêu ecma | 2020 | Kiểm soát cú pháp đầu ra và một số quy tắc nén |
| module so với script | script | Bật tối ưu hóa module/cấp cao nhất cho các gói ESM |
| keep_fnames / keep_classnames | false | Giữ nguyên tên để có stack trace tốt hơn hoặc cho các framework DI |
| safari10 / đặc thù cũ | tắt | Chỉ bật khi nhắm mục tiêu các engine cũ cụ thể |
| toplevel | false | Cho phép loại bỏ các ràng buộc cấp cao nhất không sử dụng để tree-shaking nâng cao |
Giảm Kích Thước Điển Hình
Mức tiết kiệm thay đổi tùy theo định dạng ban đầu, mật độ bình luận và lượng mã chết tồn tại.
| Kiểu Đầu Vào | Chỉ Nén | Nén + Xáo trộn (Mạnh mẽ) |
|---|---|---|
| Được chú thích và khoảng cách nhiều | 35%–55% | 50%–70% |
| Mã ứng dụng được định dạng vừa phải | 20%–35% | 35%–55% |
| Mã đã được nén sẵn | 5%–15% | 10%–25% |
Các Lựa Chọn CLI Cho Bản Dựng Sản Xuất
Đối với ứng dụng đầy đủ và dự án đa tệp, tích hợp tối giản hóa vào pipeline CI/CD của bạn.
Node.js
Terser (trường hợp phổ biến)
npx terser src/app.js -o dist/app.min.js -c ecma=2020,passes=2 -mHai lượt nén cộng với xáo trộn định danh để giảm kích thước mạnh mẽ.
Terser với tên được bảo lưu và drop_console
npx terser src/app.js -o dist/app.min.js -c passes=2,drop_console=true -m reserved=["React","ReactDOM"] --keep-fnamesBảo vệ các biến toàn cục quan trọng, loại bỏ lệnh console và giữ tên hàm để gỡ lỗi.
Linux/macOS/Windows
esbuild (rất nhanh)
npx esbuild src/app.js --minify --target=es2018 --outfile=dist/app.min.jsGộp và tối giản hóa trong một bước cực kỳ nhanh chóng.
SWC (Dựa trên Rust)
npx swc src -d dist --minifyBiên dịch và tối giản hóa với công cụ Rust hiệu suất cao.
Các Trường Hợp Sử Dụng Phổ Biến
Hiệu Suất Web & Core Web Vitals
- Giảm kích thước truyền tải JavaScript để LCP và TTI nhanh hơn
- Cắt bỏ chú thích gỡ lỗi và ghi log trước khi triển khai
- Thu nhỏ các gói phía máy khách trước khi nén gzip/brotli
/* chú thích chỉ dành cho bản dựng sẽ bị loại bỏ trong đầu ra đã tối giản */CI/CD và Tự Động Hóa Phát Hành
- Tối giản hóa JS như bước cuối cùng trong pipeline xây dựng của bạn
- Chuẩn bị các gói nhỏ, thân thiện với bộ nhớ đệm cho CDN
- Tạo tài sản sẵn sàng cho sản xuất cùng với các công cụ tối giản hóa HTML/CSS
Tiện Ích, Nhúng & Thử Nghiệm
- Gửi các đoạn mã nhỏ gọn qua trình quản lý thẻ
- Nhúng các tiện ích thu gọn vào trang của bên thứ ba
- Thử nghiệm các chiến lược nén khác nhau trên các tập lệnh quan trọng
❓ Frequently Asked Questions
Việc thu gọn JavaScript có thay đổi cách mã chạy không?
Công cụ này có xử lý trực tiếp TypeScript hoặc JSX không?
JavaScript của tôi có được tải lên máy chủ không?
Tập tin JavaScript của tôi có thể lớn đến mức nào?
Sự khác biệt giữa định dạng và thu gọn là gì?
Pro Tips
Định nghĩa NODE_ENV=production (hoặc tương đương) trong bundler của bạn để mở khóa việc cắt tỉa mã chết bổ sung trong nhiều thư viện.
Giữ mã nguồn chưa thu gọn (và, đối với ứng dụng lớn, bản đồ nguồn) trong kiểm soát phiên bản, và chỉ phân phối tài nguyên đã thu gọn trong môi trường sản xuất.
Sử dụng tên được bảo lưu khi xáo trộn để bảo vệ API công khai treo trên window hoặc globalThis.
Kết hợp thu gọn với gzip hoặc brotli ở cấp CDN hoặc máy chủ để đạt được tiết kiệm kích thước nhân lên.
Additional Resources
Other Tools
- Bộ Làm Đẹp CSS
- Bộ Làm Đẹp HTML
- Bộ Làm Đẹp Javascript
- Bộ Làm Đẹp PHP
- Bộ Chọn Màu
- Bộ Trích Xuất Sprite
- Bộ Giải Mã Base64
- Bộ Mã Hóa Base64
- Bộ Định Dạng Csharp
- Bộ Định Dạng CSV
- Dockerfile Formatter
- Bộ Định Dạng Elm
- Bộ Định Dạng ENV
- Bộ Định Dạng Go
- Bộ Định Dạng GraphQL
- Bộ Định Dạng HCL
- Bộ Định Dạng INI
- Bộ Định Dạng JSON
- Bộ Định Dạng Latex
- Bộ Định Dạng Markdown
- Bộ Định Dạng ObjectiveC
- Php Formatter
- Bộ Định Dạng Proto
- Bộ Định Dạng Python
- Bộ Định Dạng Ruby
- Bộ Định Dạng Rust
- Bộ Định Dạng Scala
- Bộ Định Dạng Tập Lệnh Shell
- Bộ Định Dạng SQL
- Trình Định Dạng SVG
- Trình Định Dạng Swift
- Trình Định Dạng TOML
- Typescript Formatter
- Trình Định Dạng XML
- Trình Định Dạng YAML
- Trình Định Dạng Yarn
- Bộ Thu Nhỏ CSS
- Html Minifier
- Bộ Thu Nhỏ JSON
- Trình Thu Nhỏ XML
- Trình Xem Tiêu Đề HTTP
- PDF Sang Văn Bản
- Bộ Kiểm Tra Regex
- Bộ Kiểm Tra Xếp Hạng SERP
- Tra Cứu Whois