ReactJS: So sánh @loadable/component với React.lazy

Sự khác biệt giữa React.lazy và @loadable/component là gì?

React.lazy là giải pháp được đề xuất cho việc tách mã. Nó sử dụng Suspense và nó được duy trì bởi React.

Nếu bạn đã sử dụng React.lazy và nếu nó đang hoạt động tốt, bạn không cần @loadable/component.

Nếu bạn cảm thấy hạn chế hoặc nếu bạn cần SSR, thì @loadable/component là giải pháp.

Bảng so sánh

Suspense

Hồi hộp được hỗ trợ bởi React.lazy và bởi @loadable/component. @loadable/component cũng có thể được sử dụng mà không cần Suspense.

Kết xuất phía máy chủ (Server Side Rendering - SSR)

Suspense không khả dụng ở phía máy chủ và React.lazy chỉ có thể hoạt động với Suspense. Đó là lý do tại sao hiện tại React.lazy không phải là một tùy chọn nếu bạn cần Kết xuất Phía Máy chủ.

@loadable/component cung cấp một giải pháp hoàn chỉnh để giúp Server Side Rendering có thể thực hiện được.

Tách thư viện

@loadable/component hỗ trợ chia nhỏ thư viện bằng cách sử dụng các prop kết xuất. Điều này là không thể với React.lazy.

import full động

Import full động hay còn gọi là tách mã linh hoạt là một tính năng được hỗ trợ bởi Webpack. Nó bao gồm việc truyền một giá trị động cho hàm động import().

// Tất cả các file tương thích với mẫu này sẽ tự động được tách mã.
const loadFile = file => import(`./${file}`)

Trong React, @loadable/component cho phép tạo các component có thể sử dụng lại:

import loadable from '@loadable/component'

const AsyncPage = loadable(props => import(`./${props.page}`))

function MyComponent() {
  return (
    <div>
      <AsyncPage page="Home" />
      <AsyncPage page="Contact" />
    </div>
  )
}

Tính năng này không được hỗ trợ bởi React.lazy.

Lưu ý về react-loadable

react-loadable là cách được khuyến nghị để tách mã React trong một thời gian dài. Tuy nhiên, ngày nay nó không được bảo trì nữa và nó không tương thích với Webpack v4 + và Babel v7 +.

Nếu bạn sử dụng nó, bạn nên chuyển sang React.lazy hoặc @loadable/component.