Code Splitting trong ReactJS
HTML-код
- Опубликовано: 19 ноя 2022
- 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: holetex@outlook.com
Website: holetex.com
🤝 Tham gia làm hội viên của kênh này để được hưởng đặc quyền:
ruclips.net/user/HoleTexjoin
#holetex #frontend #react #reatjs #codesplitting
*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.
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.
Rất hữu ích và dễ hiểu a ạ, mong anh ra nhiều video như này :v
Hay quá anh, cảm ơn anh vì những kiến thức bổ ích
Cảm ơn anh, video hay và bổ ích ạ, keep it up ❤
hay quá anh, mong anh ra nhiều video React về tối ưu performance :3
Hay quá a ơi👍Keep it up 💯
Cám ơn anh, video rất hữu ích ạ
Xem video anh nói dễ hiểu, dễ nắm, rõ ràng , mong anh ra series về React + typescript
Video hay quá, cảm ơn a đã chia sẽ
video hay và rất hữu ích. Cảm ơn anh nhiều
Rất hay luôn a, e phải tải về để để lưu lại xem kỹ
Kiến thức hay, thanks anh
Cảm ơn anh đã chia sẻ! 🌈
tuyệt vời anh chai ơi.
thanks anh , kiến thức rất hay , mong anh làm về series typescripts+react
Hay quá Tùng ơi
quá dễ hiểu 💯
kiến thức này hay quá anh ơi. 20/11 chúc anh nhiều sức khỏe.
Cảm ơn em nhiều nha ❤️
Kiến thúc rất dễ hiểu, cảm ơn anh, mong a làm thêm về Typescript + Reactjs
Cảm ơn em nhé
Hay quá a ơi mong a làm thêm về React
Cảm ơn em nhé
cảm ơn anh!
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ò
Cảm ơn Khang nhé
hay quá anh ơi
Lúc trước xem cho vui, giờ làm động đến mới dùng:))
Cảm ơn anh về những Video hay.
Anh có thể làm video về Web worker trong React JS được không ạ??
hay anh ơi
Vid hay ạ
Cảm ơn Vinh nhé
Sắp có nextjs 13 thay đổi khá nhiều về Nextjs anh có làm seri về Nextjs không ạ
làm clip đa luồng nodejs đi a
a làm thêm 1 vid về vite react đi a
làm khóa Router v6 đi anh ơiii
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 ạ
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.
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 ạ ?
Cho em hỏi nhiều Suspense lazy lồng nhau được không ạ?
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ỉ
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
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 ạ. @@
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 !
Cảm ơn em
anh làm video về react project đi ạ
Anh đang làm đó. Hẹn em nhanh thì tuần tới, trễ thì 2 tuần tới nha 😄
Nếu như mình sử dụng LoadingSkeleton với từng conpoennt thì nó vẫn được đúng không anh .
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^^
Anh sẽ thông báo vào thời điểm thích hợp em nhé ❤️
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
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
vue thì sao a
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?
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
Я из Беларуси, почему я это вижу? И какой это язык
video hữu ích quá, cám ơn anh nhiều ạ