Bundle & Chunk File - Make It Awesome

Skip to content Open Menu

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.

Share this:

• Facebook

Related

Post navigation Previous Post* SelectorNext PostElectronJS thú vị cực!

Leave a comment

Δ

Highlight posts

HIGHLIGHT TAGS

Apollo Client Binance Build tool bundle chunk Context API Cookie Crypto CSR CSS Debounce DevUP Document DOM ElectronJS Enzyme Front-end Goal Healing HTML J2Team Community JavaScript JSX Lazy loading Loop Markup Module bundler NodeJS npm Piano project React Redux Semicolon setState() SSR Storage SunStory TeaTalk Throttle Trade Typescript useEffect() Vite Window

FIND ME VIA

• Facebook
• GitHub
• YouTube
• Link
• LinkedIn
• WordPress

TEATALK

Interested in having a tea talk with me?Feel free to schedule a time here ☕☕

FOLLOW

Type your email…

Subscribe

COPYRIGHT

Back to top

• Comment
• Subscribe Subscribed
  • Make It Awesome
  Join 36 other subscribers. Sign me up
  • Already have a WordPress.com account? Log in now.
• • Make It Awesome
  • Subscribe Subscribed
  • Sign up
  • Log in
  • Copy shortlink
  • Report this content
  • View post in Reader
  • Manage subscriptions
  • Collapse this bar

Design a site like this with WordPress.comGet started