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!