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 🔗
Source code thực hành cùng video: github.com/holetexvn/code-spi...
Học React trong 30 phút: • Học React JS cơ bản tr...
React Hooks Series: • Học useState - React H...
📢 Liên hệ với mình tại:
Facebook: / holetex
Tiktok: / holetex
Github: github.com/holetexvn
Facebook cá nhân: / minhtung09
Email: [e-mail]
Website: holetex.com
🤝 Tham gia làm hội viên của kênh này để được hưởng đặc quyền:
kzbin.infojoin
#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.

[@hoangxuan3365]

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.

[@cruzlee4092]

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

[@ucmanho1237]

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

[@nguyenvo9497]

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

[@pqan112]

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

[@trongnguyenduy3936]

Video hay quá, cảm ơn a đã chia sẽ

[@letuanthanh677]

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

[@youngtee_01]

Hay quá a ơi👍Keep it up 💯

[@vanhai31]

Cám ơn anh, video rất hữu ích ạ

[@K.Huynh.]

Cảm ơn anh đã chia sẻ! 🌈

[@haula08]

Kiến thức hay, thanks anh

[@user-ut3pe9dj2k]

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

[@DenDenCover]

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

[@thangta8147]

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

[@ngueynledinhtien2507]

tuyệt vời anh chai ơi.

[@longphinguyen5436]

quá dễ hiểu 💯

[@user-hm4dl9yt9o]

cảm ơn anh!

[@TuanPham-oi1ge]

hay quá anh ơi

[@vubuiminh2804]

Hay quá Tùng ơi

[@banghuynh7]

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

[@toanho2850]

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

[@holetex]

Cảm ơn em nhiều nha ❤️

[@mikey.dev194]

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

[@holetex]

Cảm ơn em nhé

[@thaiphamminh8433]

Hay quá a ơi mong a làm thêm về React

[@holetex]

Cảm ơn em nhé

[@hogiang8878]

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

[@KhangNguyen-kq2iw]

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ò

[@holetex]

Cảm ơn Khang nhé

[@ZzReikezZ]

hay anh ơi

[@NoName-km2xe]

a làm thêm 1 vid về vite react đi a

[@nguyenkhactiem9387]

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.

[@Danginh5784]

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

[@nghiatranai2785]

làm clip đa luồng nodejs đi a

[@hoangdinhtan4342]

làm khóa Router v6 đi anh ơiii

[@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

[@anhduy889]

Cho e hỏi có nên áp dụng hết lazy vào các component và các module function không ạ ?

[@vinhtran6309]

Vid hay ạ

[@holetex]

Cảm ơn Vinh nhé

[@khanhta-rx2ku]

thế thì lúc nó split chia thành nhiều file js -> khi browser được reload -> tất cả các file js đều chạy song song cùng 1 lúc -> cái nào xong trước hiển thị UI ra trước đúng k a nhỉ. Hay đơn thuần nó vẫn theo quy tắc đồng bộ -> xong file js này -> mới chạy tiếp file js kia a nhỉ

[@quanghiep9736]

em đang có 1 project nho nhỏ với vite và react và router v6, nhưng hiện có bug là khi f5 tải lại trang, nó k render lại trang hiện tại mà redirect sang 1 trang trước đó, mn ai từng dính bug này chỉ giáo giúp e với ạ. @@

[@anhtuanle4991]

Nếu như mình sử dụng LoadingSkeleton với từng conpoennt thì nó vẫn được đúng không anh .

[@KhangNguyen-kq2iw]

anh dự định khi nào làm khóa trên udemy và nếu có thì anh bật mí 1 chút về dự án hay công nghệ nào dc hong anh^^

[@holetex]

Anh sẽ thông báo vào thời điểm thích hợp em nhé ❤️

[@kytosai]

Trong video anh holetex đang sử dụng vitejs thì phần bundle file sẽ không phải do webpack mà do rollup đảm nhiệm nha Mong anh ra nhiều video về perf hoặc advance hơn nữa :D !

[@holetex]

Cảm ơn em

[@annguyen5119]

anh làm video về react project đi ạ

[@holetex]

Anh đang làm đó. Hẹn em nhanh thì tuần tới, trễ thì 2 tuần tới nha 😄

[@ICOReviewtoken]

Nếu giữa homepage và post page có dùng chung cùng 1 component thì component thì tổng dung lượng các file js nhiều hơn vì có tới 2 files mà trong mỗi file cùng gọi chung 1 component thì có ảnh hưởng gì ko a. Đối với CSS thì có solution gì không a, style module đc ko a

[@holetex]

Code không bao giờ bị trùng đâu em. Nó chỉ tải 1 lần thôi em. Em test thử xem. Css thì anh ko rõ, với dung lượng css sau khi build cũng k lớn lắm nên tải cũng nhanh thôi em

[@buiac7896]

vue thì sao a

[@ziat1988]

Vậy tại sao tất cả các component không được lazy loading làm mặc định luôn cho các devs khỏi vất vả vậy ad?

[@holetex]

Cái đó phải do dev quyết định, nếu làm vậy thì vd bạn có 100 components thì nó chia ra hơn 100 files JS à :D

[@lethanh_channel]

chạy local vẫn lazy được đâu cần build lên production đâu anh

[@holetex]

Đúng rồi. Ý là anh phải build để demo việc nó chia ra nhiều files js còn em code chạy local npm run start bình thường

[@Just__Ilya]

Я из Беларуси, почему я это вижу? И какой это язык

[@juhandvan]

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