react项目中引用AntDesign组件库时,在运行项目报一下警告:
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
这是因为在使用ant组件库时:使用了
import { Button } from 'antd';
的写法引入了 antd 下所有的模块,这会影响应用的网络性能;
使用 babel-plugin-import 来进行按需加载:
执行:npm i babel-plugin-import -D
安装一个babel插件用于做组件的按需加载(否则项目会打包整个组件库,非常大)根目录下新建.roadhogrc文件(别忘了前面的点,这是roadhog工具的配置文件,下面的代码用于加载上一个命令安装的import插件),写入:
{
"extraBabelPlugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "lib",
"style": "css"
}]
]
}