按需加载antd的实现方式:
用create-react-app 创建项目后,如果需要第三方的插件库,需要配置wabpack配置文件,
1、首先运行npm run eject或yarn eject暴露出webpack的配置文件:
项目会多出config和scripts文件夹
2、安装完antd和babel-plugin-import后,修改根目录下的package.json babel处
(
安装antd:yarn add antd
安装babel-plugin-import:npm install babel-plugin-import --save-dev
)
安装后打开根目录的package.json文件在babel的presets后面添加:
"plugins":[["import", {"libraryName": "antd", "style": "css"}]]
npm run install 后再启动项目 npm run start
看到组件中按需引入Input后页面上样式也没什么问题。控制台也没有报错。
这样就简单的通过修改package.json文件实现了antd的按需加载。
实现方式二:
同时修改webpack的配置文件config目录下的webpack.config.dev.js和/webpack.config.prod.js。
找到babel-loader,webpack.config.dev.js在223行,webpack.config.prod.js在307行。
在plugins处增加一项
["import", {"libraryName": "antd","libraryDirectory": "es","style": "css" }]
重启项目后发现也能正常使用。