ReactJS: Plugin Babel

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Plugin này bổ sung hỗ trợ cho Hiển thị phía máy chủ và các tên phân đoạn tự động.

Sử dụng

Cài đặt plugin babel trước:

npm install --save-dev @loadable/babel-plugin

Sau đó, thêm nó vào cấu hình babel của bạn như sau:

{
  "plugins": ["@loadable/babel-plugin"]
}

Chuyển đổi (Transformation)

Plugin biến đổi mã của bạn để sẵn sàng cho Kết xuất phía máy chủ, nó chuyển một lệnh gọi có thể tải được:

import loadable from '@loadable/component'

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

thành một cái khác với một số thông tin cần thiết cho Kết xuất phía máy chủ:

import loadable from '@loadable/component'
const OtherComponent = loadable({
  chunkName() {
    return 'OtherComponent'
  },

  isReady(props) {
    if (typeof __webpack_modules__ !== 'undefined') {
      return !!__webpack_modules__[this.resolve(props)]
    }

    return false
  },

  requireAsync: () =>
    import(/* webpackChunkName: "OtherComponent" */
    './OtherComponent'),

  requireSync(props) {
    const id = this.resolve(props)

    if (typeof __webpack_require__ !== 'undefined') {
      return __webpack_require__(id)
    }

    return eval('module.require')(id)
  },

  resolve() {
    if (require.resolveWeak) {
      return require.resolveWeak('./OtherComponent')
    }

    return require('path').resolve(__dirname, './OtherComponent')
  },
})

Như bạn có thể thấy, chú thích "webpackChunkName" được tự động thêm vào.

Về phía khách hàng, hai mã hoàn toàn tương thích.

Xin lưu ý rằng babel không được định cấu hình để loại bỏ các comment, vì tên chunk được xác định trong một nhận xét.

Phát hiện có thể tải được (Loadable detection)

Việc phát hiện của một thành phần có thể tải được dựa trên từ khóa "loadable". Đó là một sự lựa chọn kiên quyết, nó mang lại cho bạn sự linh hoạt nhưng cũng có thể hạn chế.

Mã này sẽ không được chuyển đổi bởi plugin babel:

import load from '@loadable/component'
const OtherComponent = load(() => import('./OtherComponent'))

Hàm load không được phát hiện, bạn phải đặt tên cho nó là loadable.

Nó có giới hạn, có nhưng nó có thể mang lại cho bạn một số tính linh hoạt. Bạn có thể tạo chức năng có thể tải của riêng bạn. Trong ví dụ sau, chúng tôi tạo một hàm có thể tải tùy chỉnh với một dự phòng tùy chỉnh:

import baseLoadable from '@loadable/component'

function loadable(func) {
  return baseLoadable(func, { fallback: <div>Loading...</div> })
}

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

Comment ma thuật (Magic Comment)

Để mang lại cho bạn tính linh hoạt và tính di động, plugin babel hỗ trợ comment ma thuật. Bằng cách này, bạn có thể tạo các hàm "tải" di động. Để tạo một hàm "tải", bạn phải thêm comment /* #__LOADABLE__ */ phía trên phần khai báo hàm của mình (biến hoặc thuộc tính):

const loadOther = /* #__LOADABLE__ */ () => import('./OtherComponent')

const OtherComponent = loadable(loadOther)

Chức năng loadOther sẽ được chuyển đổi thành một đối tượng, bằng cách này bạn có thể thao tác chức năng và nó vẫn có tính linh hoạt!

» Tiếp: Hướng dẫn sử dụng Reach Router
« Trước: Kết xuất phía máy chủ (Server Side Rendering)
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!