반응으로 주문형 로딩을 구현하는 방법

반응에서 주문형 로딩을 구현하는 방법: 1. "'antd/lib/button/style' 가져오기"를 통해 구성 요소를 정확하게 로드합니다. 2. "babel-plugin-import" 플러그와 협력하여 주문형 로딩을 구현합니다. -in; 3. "babel-plugin-import+react-app-rewired"를 통해 요청 시 로드할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, React18 버전, Dell G3 컴퓨터.

반응에서 주문형 로딩을 구현하는 방법은 무엇입니까?

React에서 주문형 로딩을 구현하는 3가지 방법

1. 구성요소를 정확하게 로드

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

2. 구성을 노출하고 babel-plugin-import 플러그인과 협력하여 주문형 로딩을 구현합니다

babel- 플러그인 가져오기는 요청 시 구성 요소와 스타일을 로드하는 바벨 플러그인 도구입니다

구성 노출

npm run eject

플러그인 설치

 npm install babel-plugin-import -S

패키지.json 수정

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

구성 후 직접 도입: 'antd에서 {버튼} 가져오기 '

3. babel-plugin-import+react-app-rewired는 온디맨드 로딩을 ​​구현합니다

react-app-rewired는 노출된 구성 없이 웹팩 구성을 확장합니다

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

구성 후 직접 도입: 'antd에서 {Button} 가져오기 '

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응으로 주문형 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!