https://github.com/imcuttle/react-webpack-lazyloader
The webpack loader for react component
https://github.com/imcuttle/react-webpack-lazyloader
Last synced: about 1 year ago
JSON representation
The webpack loader for react component
- Host: GitHub
- URL: https://github.com/imcuttle/react-webpack-lazyloader
- Owner: imcuttle
- License: mit
- Created: 2020-09-16T12:26:31.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T11:23:06.000Z (about 3 years ago)
- Last Synced: 2025-03-23T02:34:04.771Z (about 1 year ago)
- Language: TypeScript
- Size: 1.61 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: License
Awesome Lists containing this project
README
# react-webpack-lazyloader
[](https://travis-ci.org/imcuttle/react-webpack-lazyloader)
[](https://codecov.io/github/imcuttle/react-webpack-lazyloader?branch=master)
[](https://www.npmjs.com/package/react-webpack-lazyloader)
[](https://www.npmjs.com/package/react-webpack-lazyloader)
[](https://prettier.io/)
[](https://conventionalcommits.org)
> The webpack loader for fetch react component async
用于异步按需加载 React Component, 支持 Dll 按需加载，推荐在 **微前端项目 或 大组件加载 或 服务端支持 H2** 的时候使用
## Installation
```bash
npm install react-webpack-lazyloader @loadable/babel-plugin -D
# or use yarn
yarn add react-webpack-lazyloader @loadable/babel-plugin --dev
```
## How it works?
Use webpack pitch loader and inspired by style-loader.
- Origin Button
```jsx
export default () =>
```
- Transformed Button after `react-webpack-lazyloader`
```jsx
import loadable from '@loadable/babel-plugin'
const Component = loadable(() => import('!!BUTTON_REQUEST'))
const Button = React.forward(function Button(props, ref) {
return
})
export default Button
```
## Usage
```js
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: [/\.lazy\.(tsx|jsx?)$/, /\/pages\/[^\/]+?\/index\.tsx$/],
loader: 'react-webpack-lazyloader',
options: {
lazyType: 'React.lazy',
fallbackRequest: paths.resolveApp('src/page-loading.tsx'),
chunkName: 'react-lazy-[name]-[contenthash:8]'
}
}
]
}
}
```
### 正常使用
```jsx
import Button from 'react-webpack-lazyloader!./button'
// 按照正常逻辑使用
;button
```
### 结合 DllPlugin
使用 DllPlugin，会预先把 chunk 一个个分离好，在 main.js 中则会按照 dll chunk 进行加载，比较**适合母子前端工程使用**
例子请看：[examples](./examples)
**注意：** Dll 模式下的组件更新，不会热替换，可能需要 IPC (Dll watch <-> Dev Server)，后续进行完善，或者对于需要频繁改动的依赖，不建议 chunk 至 DLL 中
## Options
### `lazyType`
使用 [`@loadable/component`](https://github.com/gregberge/loadable-components) 还是 `React.lazy` 方式实现异步加载，其中 `@loadable/component` 支持 [SSR](./examples)
- Type: `'loadable' | 'React.lazy'`
- Default: `'loadable'`
### `fallback`
需要是可以正确注入的表达式字符串，如 `'"加载中"'` 而不能是 `'加载中'`
可以是 ``
- Type: `string`
- Default: `'null'`
### `fallbackRequest`
Suspend 中 fallback 参数的引用 element，如 `/path/to/loading.js`，可以保证 `/path/to/loading.js` 被正确 loader 转换
- `loading.js`
```jsx
import * as React from 'react'
export default
```
- Type: `string`
- Default: `'null'`
### `jsx`
是否用 JSX 语法，否则用 `React.createElement`
- Type: `boolean`
- Default: `false`
### `chunkName`
chunk name
- Type: `string`
- Default: `null`
### `exposeNamedList`
需要暴露的组件
- Type: `string[]`
- Default: `['default']`
### `wrapExposeComponentRequest`
- 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](https://github.com/imcuttle) 🐟