Tree Shaking Là Gì?
Tree Shaking là kỹ thuật tối ưu trong build process, giúp loại bỏ code không được sử dụng ra khỏi file final bundle. Tưởng tượng bạn có một cái cây, lắc mạnh一下, những chiếc lá khô (code chết) sẽ rụng xuống, chỉ còn lại những cành xanh tươi (code thực sự cần thiết).
Thuật ngữ này đượcRich Harris popularize thông qua Rollup.js từ năm 2015, và nhanh chóng trở thành tiêu chuẩn trong hầu hết bundler hiện đại như Webpack, Vite, esbuild.
Tree Shaking Hoạt Động Thế Nào?
Để Tree Shaking hoạt động, cần hai điều kiện: code phải viết theo ES Modules (import/export) và bundler phải ở chế độ production.
Quá trình diễn ra như sau: bundler phân tích dependency graph từ entry point, đánh dấu tất cả export nào thực sự được import ở đâu đó, rồi loại bỏ những thứ không ai dùng. Nó giống như dọn nhà — bạn chỉ giữ lại đồ vật nào có người dùng, còn lại thì vứt.
Ví Dụ Thực Tế
Giả sử bạn có một utility file math-utils.js với 50 hàm, nhưng app chỉ dùng 3 hàm. Không có Tree Shaking, toàn bộ 50 hàm sẽ vào bundle. Có Tree Shaking, chỉ 3 hàm đó được giữ lại, phần còn lại bị strip sạch.
Với lodash, ví dụ kinh điển: import { debounce } from 'lodash' thay vì import _ from 'lodash' có thể giảm bundle từ 70KB xuống chỉ còn vài KB. Sự khác biệt rất lớn.
Tại Sao Tree Shaking Quan Trọng?
Web ngày càng nặng. Một app React trung bình có thể pull hàng trăm KB JavaScript trước khi Tree Shaking. Sau khi shake, con số có thể giảm 40-70% tùy project.
Bundle nhỏ hơn đồng nghĩa với load nhanh hơn, User Experience tốt hơn, và Core Web Vitals đạt điểm cao hơn. Trong SEO, page speed là ranking factor trực tiếp, nên Tree Shaking thực sự ảnh hưởng đến thứ hạng tìm kiếm.
Mình đã thấy không ít project mà chỉ cần bật Tree Shaking đúng cách, Lighthouse score nhảy từ 60 lên 85+. Không cần thay đổi logic, không cần refactor, chỉ cần cấu hình bundler cho đúng.
Cách Bật Tree Shaking Trong Dự Án
Webpack
Trong webpack.config.js, đảm bảo mode: 'production' và optimization.usedExports: true. Webpack 4+ tự bật Tree Shaking ở production mode, nhưng bạn cần kiểm tra package.json có trường "sideEffects": false để bundler biết an toàn loại bỏ export không dùng.
Vite / Rollup
Vite dùng Rollup dưới hood, Tree Shaking được bật mặc định. Bạn gần như không cần cấu hình gì thêm. Đó là một lý do lớn khiến Vite nhanh hơn Webpack trong production build.
esbuild
esbuild cũng hỗ trợ Tree Shaking mặc định. Tốc độ build cực nhanh cộng với shake hiệu quả khiến nó ngày càng phổ biến, đặc biệt với dự án dùng Tailwind CSS.
Những Lỗi Phổ Biến Khi Dùng Tree Shaking
Dùng CommonJS Thay Vì ES Modules
require() và module.exports không tương thích với Tree Shaking. Nếu package cũ dùng CommonJS, bundler không thể phân tích tĩnh được, dẫn đến toàn bộ file bị include. Giải pháp: ưu tiên package hỗ trợ ESM.
Side Effects Không Được Khai Báo
Nếu file có side effect (thay đổi biến toàn cục, polyfill, CSS-in-JS), cần khai báo trong package.json trường sideEffects. Nếu khai báo false sai chỗ, code quan trọng có thể bị xóa sạch.
Import Dynamic Không Cần Thiết
Nếu import toàn bộ module rồi mới destructuring, Tree Shaking sẽ không hoạt động. Ví dụ: import * as Utils from './utils' rồi Utils.formatDate() — bundler không biết bạn dùng hàm nào, nên giữ hết.
Tree Shaking Khác Gì Code Splitting?
Nhiều người nhầm hai khái niệm này. Tree Shaking loại bỏ code không ai dùng. Code Splitting chia code thành nhiều file nhỏ hơn để load theo nhu cầu. Một dự án tốt cần cả hai: shake trước để bớt đồ thừa, rồi split để load thông minh.
Kiểm Tra Tree Shaking Có Đang Hoạt Động
Cách đơn giản nhất: mở file bundle cuối cùng, search tên hàm mà bạn biết không được dùng. Nếu vẫn thấy, Tree Shaking chưa hiệu quả. Công cụ như webpack-bundle-analyzer hoặc rollup-plugin-visualizer giúp trực quan hóa, rất tiện để phát hiện module nào đang bị include thừa.
Mình recommend chạy bundle analyzer mỗi vài tuần, đặc biệt khi thêm dependency mới. Nhiều khi một package nhỏ xíu lại kéo theo cả rừng code phụ thuộc mà bạn không hay biết.
Kết Luận
Tree Shaking là một trong những kỹ thuật tối ưu dễ áp dụng nhất nhưng impact rất lớn. Bundle nhẹ hơn, page load nhanh hơn, SEO tốt hơn. Nếu dự án chưa cấu hình Tree Shaking, đó là low-hanging fruit worth picking ngay.
Nhớ quy tắc: viết ES Modules, khai báo side effects đúng, và thường xuyên kiểm tra bundle size. Ba bước đơn giản nhưng hiệu quả bất ngờ.
