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: 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:
kzread.infojoin
#holetex #frontend #react #reatjs #codesplitting

Пікірлер: 57

  • @holetex
    @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
    @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.

  • @nguyenvo9497
    @nguyenvo9497 Жыл бұрын

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

  • @cruzlee4092
    @cruzlee4092 Жыл бұрын

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

  • @ucmanho1237
    @ucmanho1237 Жыл бұрын

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

  • @pqan112
    @pqan112 Жыл бұрын

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

  • @DenDenCover
    @DenDenCover Жыл бұрын

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

  • @letuanthanh677
    @letuanthanh677 Жыл бұрын

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

  • @youngtee_01
    @youngtee_01 Жыл бұрын

    Hay quá a ơi👍Keep it up 💯

  • @trongnguyenduy3936
    @trongnguyenduy3936 Жыл бұрын

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

  • @thangta8147
    @thangta8147 Жыл бұрын

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

  • @user-ut3pe9dj2k
    @user-ut3pe9dj2k Жыл бұрын

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

  • @vanhai31
    @vanhai31 Жыл бұрын

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

  • @mikey.dev194
    @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

    @holetex

    Жыл бұрын

    Cảm ơn em nhé

  • @hauladv
    @hauladv Жыл бұрын

    Kiến thức hay, thanks anh

  • @toanho2850
    @toanho2850 Жыл бұрын

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

  • @holetex

    @holetex

    Жыл бұрын

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

  • @KhangNguyen-kq2iw
    @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

    @holetex

    Жыл бұрын

    Cảm ơn Khang nhé

  • @ngueynledinhtien2507
    @ngueynledinhtien2507 Жыл бұрын

    tuyệt vời anh chai ơi.

  • @K.Huynh.
    @K.Huynh. Жыл бұрын

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

  • @vubuiminh2804
    @vubuiminh2804 Жыл бұрын

    Hay quá Tùng ơi

  • @banghuynh7
    @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 ạ??

  • @thaiphamminh8433
    @thaiphamminh8433 Жыл бұрын

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

  • @holetex

    @holetex

    Жыл бұрын

    Cảm ơn em nhé

  • @longphinguyen5436
    @longphinguyen5436 Жыл бұрын

    quá dễ hiểu 💯

  • @hogiang8878
    @hogiang8878 Жыл бұрын

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

  • @user-hm4dl9yt9o
    @user-hm4dl9yt9o6 ай бұрын

    cảm ơn anh!

  • @Danginh5784
    @Danginh5784 Жыл бұрын

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

  • @TapLamFull-Stack
    @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.

  • @nguyenkhactiem9387
    @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 ạ

  • @khanhta-rx2ku
    @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ỉ

  • @anhtuanle4991
    @anhtuanle4991 Жыл бұрын

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

  • @TuanPham-oi1ge
    @TuanPham-oi1ge9 ай бұрын

    hay quá anh ơi

  • @khoanhkhactuyetvoi
    @khoanhkhactuyetvoi2 ай бұрын

    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

  • @quanghiep9736
    @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 ạ. @@

  • @HelloEveryOne-i1g
    @HelloEveryOne-i1g18 күн бұрын

    Cho em hỏi nhiều Suspense lazy lồng nhau được không ạ?

  • @ZzReikezZ
    @ZzReikezZ Жыл бұрын

    hay anh ơi

  • @vinhtran6309
    @vinhtran6309 Жыл бұрын

    Vid hay ạ

  • @holetex

    @holetex

    Жыл бұрын

    Cảm ơn Vinh nhé

  • @nghiatranai2785
    @nghiatranai2785 Жыл бұрын

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

  • @NoName-km2xe
    @NoName-km2xe Жыл бұрын

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

  • @ICOReviewtoken
    @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

    @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

  • @hoangdinhtan4342
    @hoangdinhtan4342 Жыл бұрын

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

  • @KhangNguyen-kq2iw
    @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

    @holetex

    Жыл бұрын

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

  • @buiac7896
    @buiac78963 ай бұрын

    vue thì sao a

  • @kytosai
    @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

    @holetex

    Жыл бұрын

    Cảm ơn em

  • @ziat1988
    @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

    @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

  • @annguyen5119
    @annguyen5119 Жыл бұрын

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

  • @holetex

    @holetex

    Жыл бұрын

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

  • @Just__Ilya
    @Just__Ilya Жыл бұрын

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

  • @juhandvan
    @juhandvan Жыл бұрын

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