React でオンデマンド読み込みを実装する方法

react でオンデマンド ローディングを実装する方法: 1. 「import 'antd/lib/button/style'」を通じてコン​​ポーネントを正確にロードする; 2. 「babel-plugin」と連携してオンデマンド ローディングを実装する-import" プラグイン; 3. オンデマンドでロードするには、"babel-plugin-import reverse-app-rewired" を使用します。

#このチュートリアルの動作環境: Windows 10 システム、react18 バージョン、Dell G3 コンピューター。

React でオンデマンド読み込みを実装するにはどうすればよいですか?

react でオンデマンド読み込みを実装する 3 つの方法

1. コンポーネントを正確に読み込む

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

2. 設定を公開し、連携するbabel- plugin-import プラグインは、オンデマンド読み込みを実装します。

babel-plugin-import は、コンポーネントとスタイルをオンデマンドで読み込むための Babel プラグインです。

公開設定

npm run eject

インストール プラグイン

 npm install babel-plugin-import -S

modify package.json

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

設定直後に導入: import {Button} from 'antd'

3. Via babel -plugin-import act-app-rewired オンデマンド読み込みを実装します

react-app-rewired は設定を公開せずに Webpack 設定を拡張します

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

設定の直後に導入します: import {Button} from 'antd '

推奨学習: 「react ビデオ チュートリアル 」

以上がReact でオンデマンド読み込みを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。