Rate this post

Ứng dụng React đã gói các tệp của họ bằng các công cụ như Webpack hoặc Browserfy. Gói là một quá trình lấy nhiều tệp và hợp nhất chúng thành một tệp duy nhất, được gọi là một gói. Gói này chịu trách nhiệm tải toàn bộ ứng dụng cùng một lúc trên trang web. Chúng ta có thể hiểu nó từ ví dụ dưới đây.

App.js

import { add } from './math.js';  
  
console.log(add(16, 26)); // 42 

math.js

export function add(a, b) {  
  return a + b;  
}  

Gói file như dưới đây:

function add(a, b) {  
  return a + b;  
}  
  
console.log(add(16, 26)); // 42  

Khi ứng dụng của chúng ta phát triển, gói của chúng ta cũng sẽ phát triển, đặc biệt là khi chúng tôi đang sử dụng các thư viện lớn của bên thứ ba. Nếu kích thước gói lớn, sẽ mất nhiều thời gian để tải trên trang web. Để tránh việc phân chia lớn, tốt hơn là bạn nên bắt đầu chia nhỏ? gói của bạn.

React 16.6.0, được phát hành vào tháng 10 năm 2018 và đã giới thiệu một cách thực hiện phân tách mã. Code-Splitting là một tính năng được hỗ trợ bởi Webpack và Browserify, có thể tạo nhiều gói có thể được tải động trong thời gian chạy.

Việc tách mã sử dụng công cụ / thư viện React.lazy và Suspense, giúp bạn tải một cách lazy phần phụ thuộc và chỉ tải nó khi người dùng cần.

Việc phân tách mã được cải thiện:

  • Hiệu suất của ứng dụng
  • Tác động đến trí nhớ
  • Kích thước Kilobyte (hoặc Megabyte) đã tải xuống

React.lazy

Cách tốt nhất để tách mã vào ứng dụng là thông qua cú pháp dynamic import (). Hàm React.lazy cho phép chúng tôi hiển thị một quá trình nhập động như một thành phần thông thường.

Trước

import ExampleComponent from './ExampleComponent';  
  
function MyComponent() {  
  return (  
    <div>  
      <ExampleComponent />  
    </div>  
  );  
}  

Sau

const ExampleComponent = React.lazy(() => import('./ExampleComponent'));  
  
function MyComponent() {  
  return (  
    <div>  
      <ExampleComponent />  
    </div>  
  );  
}  

Đoạn mã trên tự động tải gói có chứa ExampleComponent khi ExampleComponent được hiển thị.

Suspense

Nếu mô-đun có chứa ExampleComponent chưa được tải bởi thành phần chức năng (MyComponent), thì chúng ta cần hiển thị một số nội dung dự phòng trong khi chờ đợi nó tải. Chúng ta có thể làm điều này bằng cách sử dụng thành phần hồi hộp. Nói cách khác, thành phần hồi hộp chịu trách nhiệm xử lý đầu ra khi thành phần lười biếng được tìm nạp và kết xuất.

const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));  
  
function MyComponent() {  
  return (  
    <div>  
      <Suspense fallback={<div>Loading...</div>}>  
        <ExampleComponent />  
      </Suspense>  
    </div>  
  );  
}  

Dự phòng hỗ trợ chấp nhận các phần tử React mà bạn muốn hiển thị trong khi chờ thành phần tải. Chúng ta có thể kết hợp nhiều thành phần lười biếng với một thành phần Suspense duy nhất. Nó có thể được nhìn thấy trong ví dụ dưới đây.

const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));  
const ExamComponent = React.lazy(() => import('./ ExamComponent'));  
  
function MyComponent() {  
  return (  
    <div>  
      <Suspense fallback={<div>Loading...</div>}>  
        <section>  
          <ExampleComponent />  
          <ExamComponent />  
        </section>  
      </Suspense>  
    </div>  
  );  
}  

Lưu ý: Các thành phần React.lazy và Suspense chưa khả dụng để hiển thị phía máy chủ. Để phân tách mã trong ứng dụng do máy chủ hiển thị, bạn nên sử dụng Thành phần có thể tải.

Error boundaries

Nếu bất kỳ mô-đun nào không tải được, chẳng hạn như do lỗi mạng, chúng tôi sẽ gặp lỗi. Chúng tôi có thể xử lý những lỗi này bằng Ranh giới lỗi. Khi chúng tôi đã tạo Ranh giới lỗi, chúng tôi có thể sử dụng nó ở bất kỳ đâu phía trên các thành phần lười biếng của chúng tôi để hiển thị trạng thái lỗi.

import MyErrorBoundary from './MyErrorBoundary';  
const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));  
const ExamComponent = React.lazy(() => import('./ ExamComponent'));  
  
const MyComponent = () => (  
  <div>  
    <MyErrorBoundary>  
      <Suspense fallback={<div>Loading...</div>}>  
        <section>  
          <ExampleComponent />  
          <ExamComponent />  
        </section>  
      </Suspense>  
    </MyErrorBoundary>  
  </div>  
);  

Phân chia Route-based code

Rất khó để quyết định nơi chúng tôi giới thiệu tách mã trong ứng dụng. Đối với điều này, chúng tôi phải đảm bảo rằng chúng tôi chọn địa điểm sẽ chia đều các nhóm mà không làm gián đoạn trải nghiệm người dùng.

Tuyến đường là nơi tốt nhất để bắt đầu tách mã. Việc phân tách mã dựa trên lộ trình là điều cần thiết trong quá trình chuyển đổi trang trên web, quá trình này mất một khoảng thời gian để tải. Dưới đây là một ví dụ về cách thiết lập phân tách mã dựa trên tuyến đường vào ứng dụng bằng cách sử dụng Bộ định tuyến React với React.lazy.

import { Switch, BrowserRouter as Router, Route} from 'react-router-dom';  
import React, { Suspense, lazy } from 'react';  
  
const Home = lazy(() => import('./routes/Home'));  
const About = lazy(() => import('./routes/About'));  
const Contact = lazy(() => import('./routes/Contact'));  
  
const App = () => (  
  <Router>  
    <Suspense fallback={<div>Loading...</div>}>  
      <Switch>  
        <Route exact path="/" component={Home}/>  
        <Route path="/about" component={About}/>  
        <Route path="/contact" component={Contact}/>  
      </Switch>  
    </Suspense>  
  </Router>  
);  

Named Export

Hiện tại, React.lazy chỉ hỗ trợ xuất mặc định. Nếu bất kỳ mô-đun nào bạn muốn nhập bằng cách sử dụng các tệp xuất được đặt tên, bạn cần tạo một mô-đun trung gian để xuất lại mô-đun đó làm mặc định. Chúng ta có thể hiểu nó từ ví dụ dưới đây.

Ví dụ

Components.js

export const MyFirstComponent = /* ... */;  
export const MySecondComponent = /* ... */;

MyFirstComponent.js

export { MyFirstComponent as default } from "./ExampleComponents.js";  

MyApp.js

import React, { lazy } from 'react';  
const MyFirstComponent = lazy(() => import("./MyFirstComponent.js")); 

Leave a Reply

Call now
%d bloggers like this: