https://nkthanh.dev/posts/tree-shaking-cho-ung-dung-web/

[utterances-bot]

Tree Shaking cho ứng dụng web - Nguyễn Khắc Thành

Tree-shaking là một phương pháp phổ biến để tối ưu ứng dụng web. Mục đích của phương pháp này là loại bỏ các deadcode ra khỏi ứng dụng web, giúp ứng dụng của bạn có thể download và chạy dưới trình duyệt được nhanh và mượt mà hơn. Bài viết này sẽ không đi sâu vào chi tiết kĩ thuật mà chỉ trình bày những ý chính, giúp mọi người có một cheatsheet căn bản trước khi thực

https://nkthanh.dev/posts/tree-shaking-cho-ung-dung-web/

[hungify]

<3

[hungify]

Sao em search thì họ lại nói như này nhỉ: In webpack, tree shaking works with both ECMAScript modules (ESM) and CommonJS

[magiskboy]

@hungify mình không rõ nguồn kia đáng tin cậy hay không nhưng bạn hãy hình dùng treeshaking chỉ thực hiện được tại build time trong khi CommonJS thì có thể import các dependency ở cả runtime. Điều này làm cho tree shaking không thể đảm bảo, do sự không đảm bảo nên nhiều bundler đã bỏ hỗ trợ tính năng này trên CommonJS

[duongductrong]

Bài viết khá hay bác ạ. Có cải tiến nào mới trong các kỹ thuật trên năm 2023 này k bác nhỉ

[1412578]

Mình xin góp ý một số chỗ, chủ yếu cho webpack:

• Side effect nên được hiểu:
  • App import X from A
  • A export X from B (aka: A import X from B, A export X) -> App import X from B (Điều kiện: A, B no sideffect) Như vậy lí do của ví dụ trên không hẳn cắt bỏ subtree mà là module index.js được skip, webpack tạo ra dependency trực tiếp từ serviceAccount1 đến userAccount và serviceAccount2 đến userPhoneNumber, module index trở nên transparent xem như không đi qua, điều này làm cho mỗi chunk chỉ chứa code mỗi function. Trường hợp, nếu module index.js có side effect, index không transparent webpack bắt buộc phải đi qua theo đúng thứ tự từ index rồi mới tới userAccount, userPhoneNumber cả ba tạo thành 1 chunk, và đều là used export. Hình vẽ cuối cùng là chưa đúng, mỗi module không được phép xé ra làm hai 2 mảnh để tạo ra 2 tree.