在使用
import {Button} from 'antd'
的时候
打开控制台,会出现这样的警告
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
实际我们在用antd的时候,只需要一个Button组件,它给完全加载进项目了,要知道antd 8W多行代码,执行完之后得花一些时间吧.
于是官方就提供了下面的解决方案:
第一:
import Button from 'antd/lib/button';
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件
按需引入组件,我反正不喜欢这种,要写的代码有点多.
第二:
一劳永逸.配置babel-loader
在webpack中自行配置:
{
test: /\.js|jsx$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015','react'],
plugins: [["import", { libraryName: "antd", style: "css"}]]
}
},
只需按照我的配置形式就可以了.
以上是我的解决方案,欢迎纠错.
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有