react中使用AntDesign库 --- babel-plugin-import 配置

来源:互联网 发布:高速摄像机知乎 编辑:程序博客网 时间:2024/05/16 13:27

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"    }]  ]}
2 0
原创粉丝点击