Code Splitting trong ReactJS

Code Splitting trong ReactJS là 1 kĩ thuật giúp chúng ta có thể chia file js thành nhiều file nhỏ hơn. Từ đó giúp tăng tốc độ load trang web của chúng ta lên rất nhiều cũng như làm nâng cao trải nghiệm của người dùng. Hãy xem hết video để hiểu rõ kĩ thuật Code Splitting là gì, cũng như là cách mà nó hoạt động trong dự án ReactJS

📚Các kiến thức sẽ tìm hiểu 📚
✔ Bundling là gì? Vì sao cần áp dụng kĩ thuật Code Splitting
✔ Cách sử dụng React lazy cùng với Suspense trong React
✔ Áp dụng Code Splitting với react-router-dom

🔗 Link tham khảo 🔗

📢 Liên hệ với mình tại:

🤝 Tham gia làm hội viên của kênh này để được hưởng đặc quyền:

#holetex #frontend #react #reatjs #codesplitting

[holetex]

*Note: Nếu các bạn sử dụng Create React App thì nó sẽ sử dụng module bundler Webpack còn trong video mình đang sử dụng ViteJS nên module bundler không phải Webpack mà là Rollup.

[hoangxuan]

này là lazy load component thôi
còn một trường hợp nữa là các package đang xài khiến việc load file js trở nên chậm chạp hơn, phải split cả các package đang xài nữa, như trên video thì các package được đóng vào file index.js, điều này sẽ dẫn đến chỉ cần 1 package update version hoặc add/remove 1 package sẽ dẫn đến người dùng cuối phải tải lại tất cả các package khác trong khi chúng không bị thay đổi, điều này là quan trọng vì bạn code thêm chỉ 1 dòng nhưng package bạn xài có khi hơn 10 nghìn dòng rồi.

[nguyenvo]

Xem video anh nói dễ hiểu, dễ nắm, rõ ràng, mong anh ra series về React + typescript

[KhangNguyen-kqiw]

hồi h nghe kĩ thuật code splitting cũng chỉ hiểu nôm na cơ chế của nó hoạt động, nhờ video này em mới hiểu nó 1 cách tường tận hơn, phải nói là cách truyền đạt kiến thức của anh Tùng quá ư là xịn xò

[mikey.dev]

Kiến thúc rất dễ hiểu, cảm ơn anh, mong a làm thêm về Typescript + Reactjs

[ucmanho]

Rất hữu ích và dễ hiểu a ạ, mong anh ra nhiều video như này :v

[cruzlee]

hay quá anh, mong anh ra nhiều video React về tối ưu performance :3

[DenDenCover]

Rất hay luôn a, e phải tải về để để lưu lại xem kỹ

[NamLê-vmc]

video hay và rất hữu ích. Cảm ơn anh nhiều

[Danginh]

Lúc trước xem cho vui, giờ làm động đến mới dùng:))

[pqan]

Hay quá anh, cảm ơn anh vì những kiến thức bổ ích

[thangta]

Cảm ơn anh, video hay và bổ ích ạ, keep it up ❤

[juhandvan]

video hữu ích quá, cám ơn anh nhiều ạ

[toanho]

kiến thức này hay quá anh ơi. 20/11 chúc anh nhiều sức khỏe.

[letuanthanh]

thanks anh, kiến thức rất hay, mong anh làm về series typescripts+react

[banghuynh]

Cảm ơn anh về những Video hay.
Anh có thể làm video về Web worker trong React JS được không ạ??

[hogiang]

Sắp có nextjs 13 thay đổi khá nhiều về Nextjs anh có làm seri về Nextjs không ạ

[nguyenkhactiem]

Em đang sài thằng vite thấy nó nhanh hơn webpack rất nhiều, anh làm video so sánh về vite và webpack đi ạ

[TapLamFull-Stack]

ReactJS hướng đến xây dựng 1 SPA, nếu dùng code-splitting nhiều quá (cho mỗi router) thì liệu nó có trở về giống với mô hình MPA (code chay html, js ) thông thường k? Mong a giải đáp.

[khoanhkhactuyetvoi]

Cho mình hỏi với sever component cụ thể là vơi Nextjs14 thì nguyên tắc có giống vậy không