Tree Shaking là gì luôn là thắc mắc hàng đầu của các lập trình viên khi bắt đầu tối ưu hóa dung lượng tải trang. Bạn có bao giờ tự hỏi tại sao dù chỉ sử dụng một vài tính năng nhỏ nhưng tệp JavaScript cuối cùng lại nặng đến vài MB không? Vấn đề thường nằm ở chỗ “Dead Code” — những đoạn mã tồn tại trong dự án nhưng không bao giờ được thực thi. Việc giữ lại những đoạn mã thừa này không chỉ làm chậm quá trình tải trang mà còn trực tiếp gây hại cho các chỉ số Core Web Vitals.
Bài viết này sẽ hướng dẫn bạn cách “rung cây” để loại bỏ những phần mã dư thừa và tinh gọn bộ máy website của mình.
Tree Shaking là gì?
Về mặt kỹ thuật, Tree Shaking là một thuật ngữ trong hệ sinh thái JavaScript dùng để chỉ quá trình loại bỏ mã không được sử dụng (dead code elimination). Theo định nghĩa từ MDN Web Docs, kỹ thuật này dựa trên các câu lệnh import và export để xác định chính xác các module nào đang thực sự hoạt động.
Nói một cách đơn giản, hãy tưởng tượng ứng dụng của bạn là một cái cây. Những đoạn code thực sự hữu ích là những cành cây xanh tươi, còn dead code là những chiếc lá khô héo. Tree Shaking chính là hành động rung mạnh chiếc cây đó để những lá khô rụng xuống. Kết quả cuối cùng là bạn chỉ “ship” những gì thực sự cần thiết đến trình duyệt của người dùng. Không sử dụng đồng nghĩa với việc không đóng gói, không tải, không phân tích và không thực thi.
Các thuật ngữ liên quan
- Dead Code: Những đoạn mã nguồn có trong file nhưng không bao giờ được gọi đến.
- Bundle: Tệp JavaScript cuối cùng được gộp lại bởi các công cụ như Webpack, Vite, hoặc Rollup.
- Side Effects: Những hành vi xảy ra khi bạn import một module dù chưa gọi hàm nào (ví dụ: ghi log, thay đổi biến global).
Cách Tree Shaking hoạt động
Cơ chế cốt lõi của Tree Shaking dựa trên Static Analysis (Phân tích tĩnh) của ES Modules (ESM). Khác với các hệ thống cũ, ESM cho phép các công cụ đóng gói (bundlers) biết được chính xác những gì được xuất và nhập ngay tại thời điểm biên dịch (compile time) mà không cần chạy code.
Quy trình kỹ thuật chi tiết
Quá trình này thường diễn ra qua 4 giai đoạn chính tại các công cụ như Webpack hoặc Vite:
- Phân tích đồ thị phụ thuộc: Bundler đọc toàn bộ các câu lệnh
importvàexportđể xây dựng bản đồ quan hệ giữa các file. - Đánh dấu Export: Hệ thống sẽ đánh dấu những phần code nào được sử dụng và phần nào đang bị “bỏ rơi”.
- Kiểm tra Side Effects: Đây là bước quan trọng. Nếu một module có “tác dụng phụ”, bundler sẽ không dám xóa nó để tránh làm hỏng ứng dụng.
- Minification: Các công cụ nén như Terser hoặc esbuild sẽ thực hiện việc xóa bỏ vật lý các đoạn mã đã được đánh dấu là không dùng đến.
Lưu ý quan trọng: Tree Shaking hoạt động tốt nhất với ESM (cú pháp import/export). Với CommonJS (require), việc phân tích tĩnh trở nên khó khăn hơn nhiều do bản chất năng động của nó tại runtime.
Ngưỡng JavaScript Payload chuẩn
Dù Google không đưa ra một “ngưỡng” cứng cho Tree Shaking, nhưng dung lượng JavaScript lại ảnh hưởng trực tiếp tới trải nghiệm người dùng. Theo khuyến nghị từ web.dev, bạn nên giữ cho JavaScript trên đường dẫn quan trọng (critical path) ở mức tối thiểu.
Dưới đây là bảng đánh giá mức độ tối ưu dựa trên dung lượng JavaScript (đã nén gzip) thường được áp dụng trong ngành:
| Mức độ JavaScript | Dung lượng (Gzip) | Đánh giá hiệu năng |
| Tốt | Dưới 170 KB | Tối ưu tuyệt vời cho mobile |
| Trung bình | 170 KB – 300 KB | Cần xem xét loại bỏ code thừa |
| Kém | Trên 300 KB | Gây lag và ảnh hưởng SEO |
Nghiên cứu thực tế cho thấy khoảng 70% các hàm JavaScript trên một trang web thông thường là không được sử dụng. Việc áp dụng Tree Shaking triệt để có thể giúp bạn giảm dung lượng trang web tới 60%, một con số khổng lồ đối với hiệu suất mobile.
Cách kiểm tra Tree Shaking của website
Để xác định xem website của bạn có đang lãng phí tài nguyên hay không, bạn có thể sử dụng các công cụ tích hợp sẵn sau:
Dùng Chrome DevTools (Tab Coverage)
Mở DevTools, nhấn Ctrl+Shift+P và gõ “Coverage”. Nhấn nút reload để bắt đầu ghi lại. Bạn sẽ thấy biểu đồ màu đỏ (unused) và xanh (used). Nếu phần màu đỏ chiếm tỷ lệ cao, đó là dấu hiệu Tree Shaking chưa hiệu quả.
Dùng Google Lighthouse
Công cụ này sẽ trực tiếp chỉ ra các vấn đề qua audit “Reduce unused JavaScript”. Đây là chỉ dẫn rõ ràng nhất để bạn biết mình cần tối ưu hóa phần nào.
Dùng Webpack Bundle Analyzer
Đây là công cụ trực quan hóa bộ bundle dưới dạng các khối màu. Bạn có thể nhìn thấy ngay thư viện nào đang chiếm diện tích lớn nhất và liệu có đoạn code nào vô lý đang được kéo vào hay không.
Cách cải thiện Tree Shaking hiệu quả
Để Tree Shaking hoạt động hiệu quả nhất, bạn cần tuân thủ các quy tắc sau trong quá trình phát triển:
Cách 1 — Ưu tiên ES Modules (ESM)
Luôn ưu tiên dùng import thay vì require. Cú pháp ESM là điều kiện tiên quyết để bundler có thể phân tích tĩnh và loại bỏ mã thừa.
Cách 2 — Import đúng phần cần dùng
Thay vì kéo cả một thư viện lớn, hãy chỉ lấy những gì bạn cần.
- Sai:
import * as lodash from 'lodash' - Đúng:
import { debounce } from 'lodash-es'(Lưu ý dùng bản-esđể hỗ trợ ESM tốt hơn).
Cách 3 — Cấu hình sideEffects trong package.json
Hãy thông báo cho bundler biết project của bạn an toàn để xóa code bằng cách thêm thuộc tính sau vào file package.json:
JSON
{
"name": "my-app",
"sideEffects": false
}
Nếu bạn có dùng CSS hoặc polyfill, hãy liệt kê chúng: "sideEffects": ["*.css", "*.polyfill.js"].
Tree Shaking ảnh hưởng SEO thế nào?
Trong SEO hiện đại, tốc độ không chỉ là trải nghiệm mà còn là thứ hạng. Việc hiểu Tree Shaking là gì giúp bạn cải thiện trực tiếp các chỉ số Core Web Vitals.
- Cải thiện INP (Interaction to Next Paint): JavaScript quá lớn sẽ khiến Main Thread bận rộn. Khi người dùng click, trình duyệt bị delay vì bận xử lý code (dù là code thừa). Loại bỏ dead code giúp giải phóng Main Thread, khiến chỉ số INP tốt hơn.
- Tăng tốc LCP (Largest Contentful Paint): Dung lượng file nhỏ hơn giúp trình duyệt tải và parse nhanh hơn, từ đó hiển thị phần tử lớn nhất trên trang sớm hơn.
- Tối ưu Crawl Budget: Website nhẹ hơn giúp bot Google thu thập dữ liệu nhanh chóng và hiệu quả hơn trên thiết bị di động.
Google đánh giá kết quả cuối cùng qua tốc độ và sự mượt mà. Tree Shaking chính là “vũ khí” âm thầm giúp bạn đạt được những con số xanh trong báo cáo.
Câu hỏi thường gặp về Tree Shaking
Tree Shaking bao nhiêu là tốt?
Không có con số cụ thể, nhưng mục tiêu là giảm tỷ lệ “Unused JavaScript” trong Chrome Coverage xuống dưới 20%. Nếu file bundle của bạn giảm được 30-50% dung lượng sau khi cấu hình, đó là một thành công lớn.
Tree Shaking khác Code Splitting thế nào?
Tree Shaking là quá trình “loại bỏ” hoàn toàn mã thừa khỏi dự án. Trong khi đó, Code Splitting là kỹ thuật “chia nhỏ” mã thành các phần khác nhau để tải sau (lazy load) khi cần thiết.
Làm sao cải thiện Tree Shaking nhanh nhất?
Cách nhanh nhất là kiểm tra lại các thư viện bên thứ ba (như Lodash, Moment, Icons). Hãy thay thế chúng bằng các phiên bản hỗ trợ ESM hoặc chỉ import những hàm cụ thể thay vì import toàn bộ.
Tree Shaking không còn là một lựa chọn “có thì tốt”, mà đã trở thành tiêu chuẩn bắt buộc trong phát triển frontend hiện đại. Việc giữ cho bundle sạch sẽ không chỉ giúp website nhanh hơn mà còn bảo vệ vị trí của bạn trên bảng xếp hạng tìm kiếm. Hãy bắt đầu kiểm tra dự án của bạn ngay hôm nay để loại bỏ những “lá khô” không cần thiết.
Đọc tiếp: Tối ưu Javascript và CSS, Web Worker là gì?
Tham khảo tài liệu chính thức tại: web.dev/tree-shaking/
