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
- react中使用AntDesign库 --- babel-plugin-import 配置
- babel-plugin-import
- babel-plugin-import不生效的问题
- babel-plugin-import不生效的问题
- React学习--使用babel
- 在React+Babel+Webpack环境中使用ESLint
- 【React全家桶入门之十一】引入AntDesign组件库
- 【React全家桶入门之十一】引入AntDesign组件库
- babel - 使用Webpack和Babel来搭建React应用程序
- Material-UI + React + Babel + Webpack 环境配置
- Material-UI + React + Babel + Webpack 环境配置
- 搭建React开发环境(使用babel,webpack3)
- webpack打包调试react并使用babel编译jsx配置方法
- Webstorm中使用babel转码器
- AntDesign使用遇到问题整理
- 配置React的Babel 6和Webpack 2环境
- 基于ES6,使用React、Webpack、Babel构建模块化JavaScript应用
- 使用webpack和babel搭建react开发环境
- POJ2027No Brainer
- SQL消费表中查找所有用户最后一条消费记录
- 467. Unique Substrings in Wraparound String
- Opencv获取最小外接矩形——minAreaRect
- underscore.js
- react中使用AntDesign库 --- babel-plugin-import 配置
- 二分图
- ios开发之NSEnumerator
- php.ini 5.6解释
- 【LeetCode】5. Longest Palindromic Substring
- spark一千篇旅游日记0006 之 DataFrame(二)
- 计算机人生思考
- .Net Error 当前不会命中断点。在 XXX.dll 中找到了 XXXX 的副本,但是当前源代码与 XXX.dll 中内置版本不同。若要允许...
- 蓝桥杯训练:爆搜——酒店招待