Video học lập trình mỗi ngày

Trong bài viết này nói về JavaScript tree shaking, có lẽ có nhiều bạn sẽ trợn mắt lên và gật gù cái đầu, à hoá ra là vậy. Vỗ đùi anh ách rồi bảo, à giờ mới biết. Tôi nói những người không biết thôi, còn những người biết rồi bỏ quá cho. Bài viết này phân tích về khái niệm Tree shaking là gì? thôi, vì vậy giả sử tôi cho rằng bạn đã biết cơ bản về những khái niệm như CommonJS ...

Tree shaking là gì?

"Tree shaking" là một tối ưu hóa hiệu suất bắt buộc phải có khi đóng gói JavaScript. Nói một cách đơn giản, Tree shaking có nghĩa là xóa code mà không sử dụng đến, hay gọi là code thừa. Theo MDN

Trên kia đó là định nghĩa của MDN, nhưng tôi cũng giống các bạn chả thích học thuật, thích đơn giản mộc mạc. Cứ hiểu như tôi Tree shaking JavaScript là rung cây theo tiếng việt đi, bạn cứ hình dung ứng dụng của mình như một cái cây vậy, source code là những chiếc lá của cây. Đương nhiên cây thì có lá xanh, lá vàng, lá héo. Lá xanh thì nên giữ, lá vàng hay héo thì nên tỉa đi. Để cho cây sống tốt hơn. Cũng giống như chúng ta phải sử dụng Tree shaking để cắt bớt code bẩn đi or code không xài tới. Giờ ok hơn chưa. Tiếp theo đến code diễn đạt như thế nào?

Tree shaking javascript

Trên đó là lý thuyết, mà lý thuyết và thực hành thì biết rồi. Các bạn biết rồi đó, tôi thì mê cr7, hầu hết các ví dụ của tôi đều có Anh ấy, giờ cũng không ngoại lệ. Ví dụ câu chuyện như sau. Năm 2021, Juve ký hợp đồng với các cầu thủ được trình lên, ví dụ code dưới đây, chúng ta có file players.js

export function cr7(){
    console.log();
}

export function messi(){
    console.log();
}

export function anonystick(){
    console.log();
}

File contract.js

const {cr7} = require('players');

Nhưng thực chất chỉ có cr7 là đúng, vậy thì hai thằng còn lại là thừa. Nếu cứ nhắm mắt mà chạy thì sai. Chính vì vậy thì phải làm sao. Nếu code thừa thì sẽ có size lớn từ đó browser sẽ dành càng nhiều thời gian để tải xuống, giải nén, phân tích cú pháp và thực thi nó. Hơi mệt đấy, chứ không đơn giản như bạn nghĩ.

Cách thực hiện thế nào? Hiện nay có nhiều thư viện giúp chúng ta xử lý chuyện này như webpack, hay rollup.js. Còn nếu bạn muốn tự build cho mình thì cũng có luôn, bài viết này rất hay cho những cá nhân thích tự làm điều này. Đại khái nó sẽ hoạt động thế này:

$ rollup contract.js

Thì khi mở lại file players.js thì code sẽ xoá và còn lại như thế này:

export function cr7(){
    console.log();
}

Tóm lại

Trở thành một nhà phát triển JavaScript bạn phải bỏ ra nhiều công sức, chứ không đơn thuần như mọi người thường nói đâu. Phải tìm hiểu nhiều hơn, và ghi lại những gì mình có cho mọi thành viên trong team mình đạt được. Đó mới là điều vươn tới. Còn đừng thất vọng nếu Tree shaking không dẫn đến tăng hiệu suất lớn cho ứng dụng của bạn. Tree shaking chỉ là một cách để giảm tải JavaScript của bạn. Kết hợp phương pháp này với các phương pháp khác như tách code ra, hay thu nhỏ code cũng có thể xem là một cách. Vậy thôi, nói nhiều không vui. Chúc thành công hén.