ReactJS: Tách mã?

Tách mã là một cách hiệu quả để giảm kích thước gói của bạn: nó tăng tốc độ tải ứng dụng của bạn và giảm kích thước tải trọng của ứng dụng của bạn.

Tính năng gói là rất tốt, nhưng khi ứng dụng của bạn phát triển, nhóm của bạn cũng sẽ phát triển theo. Đặc biệt nếu bạn đang bao gồm các thư viện lớn của bên thứ ba. Bạn cần theo dõi mã bạn đang đưa vào gói của mình để không vô tình làm cho nó quá lớn khiến ứng dụng của bạn mất nhiều thời gian để tải.

Để tránh kết thúc với một gói lớn, bạn nên giải quyết vấn đề và bắt đầu "chia nhỏ" gói của mình. Code-Splitting là một tính năng được hỗ trợ bởi các gói như Webpack và Browserify (thông qua factor-bundle), 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ã ứng dụng của bạn có thể giúp bạn "tải chậm" chỉ những thứ mà người dùng hiện đang cần, điều này có thể cải thiện đáng kể hiệu suất của ứng dụng của bạn. Mặc dù bạn không giảm lượng mã tổng thể trong ứng dụng của mình, nhưng bạn đã tránh tải mã mà người dùng có thể không bao giờ cần và giảm số lượng mã cần thiết trong lần tải đầu tiên.

import()

Cách tốt nhất để áp dụng phân tách mã vào ứng dụng của bạn là thông qua cú pháp import() động.

Trước:

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

Sau:

import('./math').then(math => {
  console.log(math.add(16, 26))
})

Lưu ý: Cú pháp động import () là một đề xuất ECMAScript (JavaScript) hiện không thuộc tiêu chuẩn ngôn ngữ. Nó dự kiến ​​sẽ được chấp nhận trong tương lai gần.

Khi Webpack gặp cú pháp này, nó sẽ tự động bắt đầu phân tách mã ứng dụng của bạn.

Nếu bạn đang tự thiết lập Webpack, có thể bạn sẽ muốn đọc hướng dẫn của Webpack về cách tách mã.

Khi sử dụng Babel, bạn cần đảm bảo rằng Babel có thể phân tích cú pháp import động nhưng không biến đổi nó. Đối với điều đó, bạn sẽ cần @babel/plugin-syntax-dynamic-import.

import() được đặt tên 

Hành vi mặc định của Webpack là đặt tên cho chúng theo dạng x.js, trong đó x là số tăng dần tùy thuộc vào số lượng khối động bạn đang import vào mã của mình.

Điều này sẽ cung cấp một cái nhìn kém về tệp đang tải mã nào.

Để khắc phục điều đó, webpack đã giới thiệu cách thức đó là magic comment, trong đó một đoạn có thể được đặt tên như sau (ví dụ math.js):

import(/* webpackChunkName: "math" */ './math').then(math => {
  console.log(math.add(16, 26))
})

LƯU Ý: Khi sử dụng Kết xuất Phía Máy chủ, hãy đảm bảo nhận xét và đường dẫn tệp chính xác theo thứ tự như trên.

Tách mã + React

React hỗ trợ tách mã ra khỏi khối với React.lazy. Tuy nhiên nó có một số hạn chế, đây là lý do tại sao @loadable/component tồn tại.

Trong một ứng dụng React, hầu hết thời gian bạn muốn chia nhỏ các component của mình. Tách một component ngụ ý khả năng đợi component này được tải (hiển thị dự phòng trong quá trình tải) nhưng cũng có thể xử lý lỗi.

Ví dụ về tách component:

import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'))

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}