ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。