ReactJS: Tìm hiểu khái niệm “Code Splitting”, “Lazy load” và “Error Boundary”

Trên bài viết trước, chúng ta đã tìm hiểu về bí quyết hợp tác những file là export và import file. Trong bài viết này, chúng ta sẽ tìm hiểu về bí quyết dùng code splitting và lazy load trong React element thông qua phương thức dynamic import(), React.lazy và React.Suspense như thế nào nhé!

Code splitting là gì?

Gần như những file trong ứng dụng React sẽ được bundle (đóng gói) bằng những công cụ như Webpack, Rollup hoặc Browserify. Đóng gói là quy trình xử lý những recordsdata đã được import và hài hòa chúng thành 1 file duy nhất.

Ví dụ 1 ứng dụng có kích thước lớn,file đóng gói sẽ phình lớn theo, đặc biệt, lúc chúng ta dùng thêm những thư viện bên thứ 3 (third social gathering library). Để giảm thiểu việc nhận 1 gói bundle lớn, chúng ta cần buộc phải chia bé file bundle.

Code splitting là 1 tính năng tương trợ tạo ra nhiều file bundle bé có thể load 1 bí quyết tự động động tại thời điểm runtime.

Ưu điểm lúc chia bé code:

  • Cho phép trình thông qua của người dụng tải toàn bộ ứng dụng trong 1 lần, họ có thể chuyển bất cứ trang nào mà ko cần load lại trang
  • Trình thông qua ko cần required hoặc import bất kì file nào nữa vì toàn bộ chúng đã tại trong file bundle.

Dynamic import trong React

1 trong những bí quyết chia bé code trong React là dùng dynamic import (import động) có cú pháp import().

Gọi import() để load 1 module dựa trên hàm Javascript Guarantees. Hàm này trả về 1 promise giả dụ cho phép load module đấy, hoặc rejected giả dụ ko được load.

Xem Thêm  Tìm hiểu về gg map - Ứng dụng hỗ trợ tìm kiếm địa điểm và điều hướng đường đi

Xét dí dụ sau:

import Login from “Pages/Login.js”; import Residence from “Pages/Residence.js”; import About from “Pages/About.js”; import Contact from “Pages/Contact.js”; import Weblog from “Pages/Weblog.js”; import Store from “Pages/Store.js”;

Đoạn code trên dùng static import thông thường (import tĩnh), đây là 1 synchronous (đồng bộ). 1 webpack chạy qua cú pháp trên sẽ đóng gói toàn bộ những file trên chung có nhau.

Nhưng dynamic import thì khác:

const module = await import(‘/modules/myCustomModule.js’);

Dynamic import là 1 asynchronous (bất đồng bộ). 1 webpack chạy qua cú pháp này sẽ khởi đầu chia bé để đóng gói những file trên thành những file bundle bé.

Lazy load là gì?

Lazy load là 1 design sample để tối ưu hóa cho ứng dụng. Lúc ta vào 1 trang net, ko buộc phải toàn bộ nội dung sẽ hiển thị hết lên trình thông qua, mà sẽ hiển thị từ từ có loading. Tùy thuộc} vào lúc chuyển trang trên trình thông qua, ứng dụng sẽ load những element khách hàng cần, tiếp theo sẽ tiếp tục loading những giá trị tiếp theo. Điều này sẽ giúp trang net sẽ chuyển động mượt mà và nhanh chóng hơn, giúp nâng cao trải nghiệm của khách hàng.

React có 2 tính năng để ứng dụng ý tưởng lazy load này cho element là React.lazy() và React.Suspense()

Dùng React.Lazy()

React.lazy() là hàm cho phép chúng ta render 1 dynamic import như 1 element bình thường.

React.lazy() nhận vào 1 perform, perform đấy buộc phải trả về 1 promise bởi cú pháp import() để load element.

React.lazy() trả về 1 promise, tiếp theo phân giải thành 1 React element được export default.

Dưới đây là 1 static import:

import Login from ‘./Login’;

Tiếp theo ta thử đổi sang thành dynamic import dùng React.lazy():

const Login = React.lazy(() => import(‘./Login’));

Trong lần tải trước tiên, file bundle chứa OtherComponent này sẽ tự động động tải.

Xem Thêm  Những chi tiết “then chốt” lúc nghiên cứu đối thủ cực nhọc} trong advertising and marketing

React.Suspense()

React element được render bởi React.lazy() nên được dùng trong 1 element Suspense của React. Nó cho phép chúng ta định nghĩa những nội dung trong lúc chờ đợi những lazy element được load. Dí dụ như loading textual content, loading aspect, pictures…

Element Suspense có thuộc tính fallback có thể render bất kì React aspect nào chúng ta muốn trong lúc chờ đợi element được tải lên. Ta có thể đặt Suspense element bất kì nời nào trên 1 lazy element.

1 element Suspense có thể bọc 1 hoặc nhiều lazy element.

import React, { Suspense } from ‘react’; const UserList = React.lazy(() => import(‘./UserList’)); const AdminList = React.lazy(() => import(‘./AdminList’)); perform MyComponent() { return ( <div> <Suspense fallback={<div>Loading…</div>}> <part> <UserList /> <AdminList /> </part> </Suspense> </div> ); }

Error boundary (Thông tin lỗi)

Từ dí dụ trên, giả dụ element UserList hoặc AdminList ko thể tải lên do lỗi mạng hoặc 1 lỗi nào đấy, Error Boundary sẽ hiển thị lỗi đấy. Ta có thể tự động định nghĩa bí quyết hiển thị lỗi đấy như thế nào trên trình thông qua.

Chúng ta có thể dùng bằng bí quyết bọc bên cạnh element Suspense để hiển thị lỗi. Lúc có lỗi, thay đổi vì React “ném ra” lỗi và ngừng ứng dụng thì Error boundary sẽ hiển thị lỗi như 1 content material của element, giúp ứng dụng chạy ko bị gián đoạn.

Dí dụ, tạo 1 bộ đếm từ 1 tới 4, giả dụ đếm tới 5 thì sẽ ném ra lỗi:

class ECounter extends React.Element { constructor(props) { tremendous(props); this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(({ counter }) => ({ counter: counter + 1, })); } render() { if (this.state.counter === 5) { throw new Error(“I crashed!”); } return <h1 onClick={this.handleClick}>{this.state.counter}</h1>; } }

Tiếp theo, tạo element ErrorBoundary để hứng lỗi của element ECounter hiển thị lên trình thông qua:

class ErrorBoundary extends React.Element { constructor(props) { tremendous(props); this.state = { error: null, errorInfo: null }; } componentDidCatch(error, errorInfo) { this.setState({ error: error, errorInfo: errorInfo, }); } render() { if (this.state.errorInfo) { // Error path return ( <div> <h2>One thing went incorrect.</h2> <particulars fashion={{ whiteSpace: “pre-wrap” }}> {this.state.error && this.state.error.toString()} <br /> {this.state.errorInfo.componentStack} </particulars> </div> ); } return this.props.youngsters; } }

Xem Thêm  Microsoft Entry là gì? Chỉ dẫn lập trình quản lý có Microsoft Entry cho người new khởi đầu

Cuối cùng, ta bọc ErrorBoundary bên bên cạnh element ECount như sau:

perform App() { return ( <div> <hr /> <ErrorBoundary> <p>Ví dụ bộ đếm đếm tới 5 sẽ lỗi !!</p> <ECounter /> </ErrorBoundary> </div> ); }

Ví dụ ko có Error Boundary hứng lỗi thì React sẽ present lỗi như sau và ko thế thực hành những hành động khác:

Nhưng lúc lỗi được bao bởi Error Boundary thì lỗi sẽ hiển thị như 1 nội dung của element, ko tương tác tới những motion của element khác:

Lazy load bằng Router (bộ định tuyến)

Đây là 1 bí quyết để phân chia code trong ứng dụng lúc bạn ko biết phân chia chúng như thế nào.

Chúng ta có thể khởi đầu chia code theo đường dẫn (router) để giảm thiểu mất thời kì tải laị những element lúc chuyển trang.

Dí dụ:

import React, { Suspense, lazy } from ‘react’; import { BrowserRouter as Router, Route, Swap } from ‘react-router-dom’; const Residence = lazy(() => import(‘./routes/Residence’)); const About = lazy(() => import(‘./routes/About’)); const App = () => ( <Router> <Suspense fallback={<div>Loading…</div>}> <Swap> <Route actual path=”/” element={Residence}/> <Route path=”/about” element={About}/> </Swap> </Suspense> </Router> );

Hy vọng những thông tin trên sẽ giúp chúng ta hiểu hơn về bí quyết dùng code splitting và lazy load trong React. Cám ơn khách hàng đã ghé thăm bài viết nhé!

Bài viết có tham khảo thông tin từ hyperlink: https://reactjs.org/docs/code-splitting.html

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Middle, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn chi phí: 1800 6734
  • E-mail: gross [email protected]
  • Web site: www.tino.org