How to implement on-demand loading in react
Dec 20, 2022 am 10:30 AMHow 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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to build a real-time chat app with React and WebSocket

Guide to React front-end and back-end separation: How to achieve decoupling and independent deployment of front-end and back-end

How to build simple and easy-to-use web applications with React and Flask

How to build a reliable messaging app with React and RabbitMQ

React code debugging guide: How to quickly locate and solve front-end bugs

How to build a fast data analysis application using React and Google BigQuery

React Router User Guide: How to implement front-end routing control

React responsive design guide: How to achieve adaptive front-end layout effects
