How to implement on-demand loading in react

How to implement on-demand loading in react: 1. Accurately load components through "import 'antd/lib/button/style'"; 2. Implement on-demand loading by cooperating with the "babel-plugin-import" plug-in; 3. Use "babel-plugin-import react-app-rewired" to load on demand.

#The operating environment of this tutorial: Windows 10 system, react18 version, Dell G3 computer.

How to implement on-demand loading in react?

3 ways to implement on-demand loading in react

1. Accurately load components

import Button from 'antd/lib/button' import 'antd/lib/button/style'

2. Expose configuration, cooperate with babel- The plugin-import plug-in implements on-demand loading

babel-plugin-import is a babel plug-in for on-demand loading of components and styles

Exposed configuration

npm run eject

Installation plug-in

npm install babel-plugin-import -S

Modify package.json

"babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style":"css" } ] ] }

Introduce directly after configuration: import {Button} from 'antd'

3. Via babel-plugin-import react-app-rewired Implement on-demand loading

react-app-rewired extends webpack configuration without exposed configuration

//安装插件: npm install babel-plugin-import -S //修改(添加)config-overrides.js文件 //引入react-app-rewired添加babel插件的函数 const {injetBabelPlugin}=require('react-app-rewired') module.exports=function override(config,env){ config=injetBabelPlugin([ [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style":"css" } ] ],config); return config }:

Introduce directly after configuration: import {Button} from 'antd'

Recommended learning: "react video tutorial"

The above is the detailed content of How to implement on-demand loading in react. For more information, please follow other related articles on the PHP Chinese website!