Tách mã trong React

Tách mã là gì và cách giới thiệu nó trong ứng dụng React

Các ứng dụng JavaScript hiện đại có thể khá lớn về kích thước gói. Bạn không muốn người dùng của mình phải tải xuống gói JavaScript 1MB (mã của bạn và các thư viện bạn sử dụng) chỉ để tải trang đầu tiên, phải không? Nhưng đây là điều xảy ra theo mặc định khi bạn gửi một Ứng dụng web hiện đại được xây dựng với gói Webpack.

Gói đó sẽ chứa mã có thể không bao giờ chạy vì người dùng chỉ dừng lại trên trang đăng nhập và không bao giờ thấy phần còn lại của ứng dụng của bạn.

Tách mã là thực hành chỉ tải JavaScript bạn cần vào lúc bạn cần.

Điều này cải thiện:

hiệu suất của ứng dụng của bạn
tác động đến bộ nhớ và do đó, việc sử dụng pin trên thiết bị di động
kích thước KiloBytes (hoặc MegaBytes) đã tải xuống

React 16.6.0, được phát hành vào tháng 10 năm 2018, đã giới thiệu một cách thực hiện phân tách mã sẽ thay thế cho mọi công cụ hoặc thư viện đã sử dụng trước đây:React.lazyvàHồi hộp.

React.lazyvàSuspensetạo thành cách hoàn hảo để tải một cách lười biếng một phần phụ thuộc và chỉ tải nó khi cần thiết.

Hãy bắt đầu vớiReact.lazy. Bạn sử dụng nó để nhập bất kỳ thành phần nào:

import React from 'react'
const TodoList = React.lazy(() => import(’./TodoList’))
export default () => {
return (
<div>
<TodoList />
</div>
)
}

thành phần TodoList sẽ được thêm động vào đầu ra ngay khi có sẵn. Webpack sẽ tạo một gói riêng cho nó và sẽ đảm nhận việc tải nó khi cần thiết.

Suspenselà một thành phần mà bạn có thể sử dụng để bọc bất kỳ thành phần nào được tải chậm:

import React from 'react'
const TodoList = React.lazy(() => import(’./TodoList’))
export default () => {
return (
<div>
<React.Suspense>
<TodoList />
</React.Suspense>
</div>
)
}

Nó đảm nhiệm việc xử lý đầu ra trong khi thành phần được tải lười biếng được tìm nạp và kết xuất.

Sử dụng nófallbackhỗ trợ xuất một số JSX hoặc một đầu ra thành phần:

...
      <React.Suspense fallback={<p>Please wait</p>}>
        <TodoList />
      </React.Suspense>
...

Tất cả điều này hoạt động tốt với React Router:

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
const TodoList = React.lazy(() => import(’./routes/TodoList’))
const NewTodo = React.lazy(() => import(’./routes/NewTodo’))
const App = () => (
<Router>
<React.Suspense fallback={<p>Please wait</p>}>
<Switch>
<Route exact path="/" component={TodoList} />
<Route path="/new" component={NewTodo} />
</Switch>
</React.Suspense>
</Router>
)

Tải xuống miễn phí của tôiSổ tay React

Tách mã trong React

Tách mã là gì và cách giới thiệu nó trong ứng dụng React

Các hướng dẫn về phản ứng khác: