react-webpack-lazyloader

The webpack loader for fetch react component async

Usage no npm install needed!

<script type="module">
  import reactWebpackLazyloader from 'https://cdn.skypack.dev/react-webpack-lazyloader';
</script>

README

react-webpack-lazyloader

Build status Test coverage NPM version NPM Downloads Prettier Conventional Commits

The webpack loader for fetch react component async

用于异步按需加载 React Component, 支持 Dll 按需加载,推荐在 微前端项目 或 大组件加载 或 服务端支持 H2 的时候使用

Installation

npm install react-webpack-lazyloader @loadable/babel-plugin -D
# or use yarn
yarn add react-webpack-lazyloader @loadable/babel-plugin --dev

How it works?

  • Origin Button
export default () => <button></button>
  • Transformed Button after react-webpack-lazyloader
import loadable from '@loadable/babel-plugin'
const Component = loadable(() => import('!!BUTTON_REQUEST'))
const Button = React.forward(function Button(props, ref) {
  return <Component ref={ref} {...props} />
})
export default Button

Usage

正常使用

import Button from 'react-webpack-lazyloader!./button'

// 按照正常逻辑使用
;<Button>button</Button>

结合 DllPlugin

使用 DllPlugin,会预先把 chunk 一个个分离好,在 main.js 中则会按照 dll chunk 进行加载,比较适合母子前端工程使用

例子请看:examples

注意: Dll 模式下的组件更新,不会热替换,可能需要 IPC (Dll watch <-> Dev Server),后续进行完善,或者对于需要频繁改动的依赖,不建议 chunk 至 DLL 中

Options

lazyType

使用 @loadable/component 还是 React.lazy 方式实现异步加载,其中 @loadable/component 支持 SSR

  • Type: 'loadable' | 'React.lazy'
  • Default: 'loadable'

fallback

需要是可以正确注入的表达式字符串,如 '"加载中"' 而不能是 '加载中'

可以是 <Spin/>

  • Type: string
  • Default: 'null'

fallbackRequest

Suspend 中 fallback 参数的引用 element,如 /path/to/loading.js,可以保证 /path/to/loading.js 被正确 loader 转换

  • loading.js
import * as React from 'react'
export default <Spin />
  • Type: string
  • Default: 'null'

jsx

是否用 JSX 语法,否则用 React.createElement

  • Type: boolean
  • Default: false

chunkName

chunk name

  • Type: string
  • Default: null

Contributing

  • Fork it!
  • Create your new branch:
    git checkout -b feature-new or git checkout -b fix-which-bug
  • Start your magic work now
  • Make sure npm test passes
  • Commit your changes:
    git commit -am 'feat: some description (close #123)' or git commit -am 'fix: some description (fix #123)'
  • Push to the branch: git push
  • Submit a pull request :)

Authors

This library is written and maintained by imcuttle, yucong06@meituan.com.

License

MIT - imcuttle 🐟