Tản mạn về Tree-shaking

Cùng mình tìm hiểu về Tree-shaking nhé!

Mục lục

Open Mục lục

Một vài định nghĩa
Câu chuyện của Bundler
Lời kết
Lưu ý
Trích dẫn

Một vài định nghĩa

Trước khi bàn về Tree Shaking chúng ta cần làm rõ với nhau 1 vài định nghĩa trước đã nhé.

Bundler: Trình đóng gói (bundle: gói)
Dead Code Elimination (DCE): Loại bỏ mã chết (Elimination: loại bỏ, code: mã, dead: chết)
Tree shaking: Rung lắc cây (shaking: rung lắc, tree: cây)

Câu chuyện của Bundler

Công việc của Bundler khá đơn giản, nó gộp nhiều javascript files thành 1 file duy nhất với điểm bắt đầu (entry point) cho trước, thường là index.js

// index.js
import { sum } from "./math.js";
console.log(sum);

// math.js
export const sum = (a, b) => a + b;

// bundler.js
const sum = (a, b) => a + b;
console.log(sum);

Mọi thứ đến đấy đều rất tuyệt, nhưng nếu chúng ta thêm 1 function mới trong file math.js

// math.js
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;

Lúc này file bundler.js sẽ là

// bundler.js
const sum = (a, b) => a + b;
const multiply = (a, b) => a * b; // Không cần thiết
console.log(sum);

Ta dễ dàng nhận thấy ở file bundler.js lúc này đang thừa function multiply được khai báo nhưng không hề được sử dụng. Để tối ưu hóa công việc này, DCE xuất hiện, nó giúp cho Bundler loại bỏ những đoạn code dư thừa, không được thực thi trong chương trình. Kết quả là sau khi chạy qua một DCE package thường là UglifyJS chúng ta sẽ được 1 final bundler file chỉ bao gồm code sẽ được thực thi:

// bundler.js
const sum = (a, b) => a + b;
console.log(sum);

Mọi thứ rất tuyệt vời, chỉ với Bundler và DCE mọi thứ đã tốt vậy thuật ngữ Tree Shaking sinh ra để làm gì và trường hợp nào ta sẽ dùng thuật ngữ này? Nó có giống DCE hay không?

Với riêng Javascript, thuật ngữ Tree Shaking được giới thiệu bởi tác giả của bundler Rollup (Rich Harris). Harris chỉ ra rằng DCE và Tree Shaking là 2 khái niệm khác nhau qua một ví dụ mình thấy rất hay:

“Hãy tưởng tượng, bạn làm bánh bằng cách để nguyên trứng chưa bóc vỏ vào bát bột mỳ và đập vỡ chúng sau đó trộn đều lên, thay vì bóc vỏ trứng rồi mới bỏ vào bát bột mỳ. Cho bát trộn vào lò nướng, khi lấy bánh ra bạn bắt đầu nhặt bỏ vỏ trứng, nhưng công việc này cực kỳ khó nên hầu như sẽ vẫn có vỏ trứng ở trong bánh, vậy là bạn sẽ bỏ rất nhiều phần bánh đi” - Đó là cách mà Dead Code Elimination đang làm, lấy final code rồi bắt đầu xóa bỏ những phần dư thừa. Tree Shaking làm khác, nó đặt ra câu hỏi cần nguyên liệu gì để làm bánh: đó là trứng đã bóc vỏ và bột mỳ, vậy là sau khi bỏ từ lò nướng ra ta được chiếc bánh không có vỏ trứng và ngon lành.

Ý tưởng của Tree Shaking là thay vì việc loại bỏ Dead Code ở giai đoạn cuối, chúng ta sẽ chỉ thêm Live Code lúc đầu vào. Kết quả có thể như nhau nhưng thứ tự làm khác nhau. Tree Shaking như việc bạn rung cây, những chiếc lá chết (Dead Code) sẽ rụng xuống và bị loại bỏ, chỉ giữ lại những chiếc lá tốt (Live Code). Lúc này bạn mới bắt đầu thu nhặt lá trên cây. Nếu suy diễn đến cùng Tree Shaking là 1 dạng của Dead Code Elimination bằng cách loại bỏ code ở tầng module.

Ví dụ về Tree Shaking

// math.ts
export function add(a, b) {
  return a + b;
}
export function multiply(a, b) {
  return a * b;
}

// app.ts
import { add } from "./math.ts";
// multiply is never imported → removed from bundle

Ví dụ về Dead Code Elimination

function process(x) {
  if (false) {
    log("debug");
  } // removed, unreachable
  const answer = 42; // removed, unused
  return x * 2;
}

console.log(process(4));

Trong thực tế cả 2 công việc này hoạt động cùng với nhau trong 1 pipeline. Bundler sẽ tree-shaking trước sau đó minifier sẽ chạy DCE để xóa những logic không được thực thi.

Tree Shaking, Dead Code Elimination and Bundler

Lời kết

Tree Shaking và DCE đều có chung một mục đích là loại bỏ code dư thừa trong chương trình nhưng chúng không phải là một.

Theo như tác giả viết thuật ngữ “Including Live Code” có thể rõ nghĩa hơn “Tree Shaking” nhưng anh ấy vẫn chọn “Tree Shaking” bởi vì trước đó ở 1 vài ngôn ngữ khác đã sử dụng thuật ngữ này và cuối cùng anh ấy cũng không nhớ chính xác tại sao lại chọn thuật ngữ ấy. Anh ấy cũng thắc mắc không biết việc chọn thuật ngữ này có là 1 lựa chọn đúng, với mình nó đúng Tree Shaking nghe khá hay và ý nghĩa trừu tượng tốt. Còn bạn nghĩ sao về nó? Bạn đã dùng Tree Shaking và DCE chưa? Cảm ơn bạn đã lắng nghe. See yaa <3!

Lưu ý

Lưu ý định nghĩa này do mình dịch từ tiếng anh qua tiếng việt qua 1 số nguồn tham khảo nên có thể chưa chính xác, mọi đóng góp ý kiến của mọi người mình xin phép được lắng nghe và sẽ chỉnh sửa sau, cảm ơn mọi người.