您好,登錄后才能下訂單哦!
今天小編給大家分享一下react如何實現(xiàn)按需加載的相關知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
react實現(xiàn)按需加載的方法:1、通過“import 'antd/lib/button/style'”精確加載組件;2、通過配合“babel-plugin-import”插件實現(xiàn)按需加載;3、通過“babel-plugin-import+react-app-rewired”實現(xiàn)按需加載即可。
react實現(xiàn)按需加載的3種方法
1.精確加載組件
import Button from 'antd/lib/button'
import 'antd/lib/button/style'
2.暴露配置,配合babel-plugin-import插件實現(xiàn)按需加載
babel-plugin-import是一個用于按需加載組件和樣式的babel插件
暴露配置
npm run eject
安裝插件
npm install babel-plugin-import -S
修改package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style":"css"
}
]
]
}
配置完之后直接引入:import {Button} from ‘a(chǎn)ntd’
3.通過babel-plugin-import+react-app-rewired實現(xiàn)按需加載
react-app-rewired在不用暴露的配置的情況下對webpack配置進行擴展
//安裝插件:
npm install babel-plugin-import -S
//修改(添加)config-overrides.js文件
//引入react-app-rewired添加babel插件的函數(shù)
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 ‘a(chǎn)ntd’
以上就是“react如何實現(xiàn)按需加載”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。