Comment implémenter le chargement à la demande dans React

Comment implémenter le chargement à la demande dans React : 1. Charger avec précision les composants via "import 'antd/lib/button/style'" 2. Implémenter le chargement à la demande en coopérant avec le plug "babel-plugin-import" ; -in; 3. Grâce à " babel-plugin-import+react-app-rewired" peut être chargé à la demande.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version React18, ordinateur Dell G3.

Comment implémenter le chargement à la demande dans React ?

3 façons d'implémenter le chargement à la demande dans React

1 Charger avec précision les composants

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

2 Exposer la configuration et coopérer avec le plug-in babel-plugin-import pour obtenir un chargement à la demande

babel-. plugin-import est un outil plug-in Babel qui charge des composants et des styles à la demande

Exposer la configuration

npm run eject

Installer le plug-in

 npm install babel-plugin-import -S

Modifier package.json

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

Introduire directement après la configuration : importer {Button} depuis 'antd '

3. Grâce à babel-plugin-import+react-app-rewired implémente le chargement à la demande

react-app-rewired étend la configuration du webpack sans configuration exposée

  //安装插件:
   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
 }:

Introduire directement après la configuration : importer {Button} depuis 'antd '

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!