Bundle & Chunk file

Notes xíu ý kiến hay ho của anh Tiep Phan, Tran Nam trong lần mình raise discussion về Code spliting, Lazy load trong ReactJS ^^

Khi build ở môi trường dev, ReactJS sẽ build lần đầu ra file bundle.js.

Sau mỗi lần có sự thay đổi source code, nó sẽ rebuild lại những thứ thay đổi đó là chunk.js. Webpack dev server có hỗ trợ điều này.

Tại sao ta phải bundle rồi lại Splitting code?

Bundle và Code splitting không phải là nghịch lí. Mà mình tận dụng lợi ích, chức năng của việc bundle mang lại.

Code splitting là kĩ thuật để tối ưu (có cũng được, không có cũng đc, có thì tốt hơn). Mà phải dùng đúng mới thấy hiệu quả, chứ không phải cái gì cũng code splitting.

Theo mình hiểu là vậy =))

Có thể hiểu cái cục bundle đó là 1 parent chunk, khi chúng ta split route thành các children chunk chẳng hạn, ReactJS sẽ append vào thẻ head:

<link rel="prefetch" href="child-chunk.js" />

để chỉ dẫn cho thằng browser sẽ đi load trc các chunk con mà bạn có thể navigate tời (sau khi load xong parent). Bạn có thể tham khảo thêm tại đây.

App từ 1 bundle ban đầu sẽ rất lớn, đồng nghĩa với việc khi bundle càng ngày càng to, việc tải về sẽ chậm hơn và có thể có nhiều phần code mà màn hình đó người dùng ko cần.

Code splitting & lazy load tách bundle ban đầu ra thành 1 bundle nhỏ hơn + nhiều chunk nhỏ hơn (tổng sau khi tách có thể to hơn 1 bundle ban đầu).

Hmm… vậy là trong một ứng dụng, cái bundle (chưa sử dụng lazy) và bundle (sử dụng lazy) nó khác nhau.

Ban đầu ứng dụng cần tải bundle nhỏ kia, và phụ thuộc code khi chạy sẽ cần load thêm 1 số chunk khác để chạy, mỗi khi gặp page mới thì nó tiêp tục load thêm những bundle cần thiết cho page đó, muốn load thêm gì thì lấy thêm 1 file chunk cho modules đó, như thế có thể tải về ít hơn.