Trong bài học này, chúng ta sẽ học cách sử dụng kỹ thuật code splitting để tách ứng dụng ReactJS của bạn thành các phần nhỏ. Việc này giúp giảm thời gian tải ứng dụng ban đầu và cải thiện hiệu suất của nó.
Code splitting trong reactjs là gì?
Trước khi bắt đầu, hãy hiểu rõ khái niệm code splitting là gì? Khi bạn xây dựng một ứng dụng web lớn, bạn sẽ có nhiều mã JavaScript. Khi người dùng tải trang web của bạn, mã đó sẽ được tải xuống và thực thi trong trình duyệt của họ.
Vấn đề là nếu bạn để toàn bộ mã trong một tập tin (file) JavaScript duy nhất, thì trình duyệt sẽ phải tải xuống toàn bộ các mã đó trước khi tiến hành hiển thị trang web của bạn. Điều này dẫn đến thời gian tải ứng dụng ban đầu rất lâu, đặc biệt là khi người dùng sử dụng kết nối mạng chậm.
Vì vậy, chúng ta sử dụng kỹ thuật code splitting để tách ứng dụng thành các phần nhỏ hơn, tải chúng ở những thời điểm cần thiết. Trong ReactJS, chúng ta có thể sử dụng dynamic imports và React.lazy () để thực hiện kỹ thuật này.\
Dynamic imports và lazy()
Dynamic imports là cách để bạn tải một tệp JavaScript chỉ khi nó được yêu cầu. Bạn có thể sử dụng cú pháp `import()` để làm điều này. Ví dụ, để tải một component tên là “MyComponent” chỉ khi nó được yêu cầu, bạn có thể sử dụng đoạn mã sau:
const MyComponent = React.lazy(() => import('./MyComponent'));Ở đây, React.lazy () giúp tạo ra một phiên bản lười biếng (lazy) của MyComponent. Nó chỉ được tải khi component MyComponent được yêu cầu.
React.lazy() cũng hỗ trợ thêm fallbacks giống như Suspense để giải quyết trường hợp tải lười biếng xảy ra lỗi.
Webpack
Ngoài ra, bạn cũng có thể tách các phần riêng lẻ của ứng dụng của bạn thành các bundle (gói tử vi) nhỏ hơn bằng cách sử dụng Webpack. Webpack là một công cụ giúp thực hiện kỹ thuật này. Bạn chỉ cần thêm mã “magic comment” /*webpackChunkName: “my-chunk-name”*/ trước import() để tự động đặt tên gói tử vi cho bạn, ví dụ:
const MyComponent = React.lazy(() =>
import(/* webpackChunkName: "my-chunk-name" */ './MyComponent')
);Việc phân tách ứng dụng của bạn thành nhiều phần nhỏ sẽ giúp bạn tận dụng các lợi ích của code splitting. Những phần của ứng dụng của bạn sẽ chỉ được tải khi cần thiết và điều này cải thiện tốc độ tải ứng dụng ban đầu.
Hy vọng bài học này giúp bạn hiểu tốt hơn về kỹ thuật code splitting và cách tách ứng dụng của bạn thành các phần nhỏ hơn. Nếu bạn có bất kỳ câu hỏi nào, hãy đăng trong phần bình luận dưới đây.
Bạn có thể xem các kỹ năng nâng cao khác của reactjs tại đây: ReactJS: các kỹ thuật lập trình nâng cao và thực hành tốt nhất bạn phải biết.
Chúc bạn may mắn và thành công!