关于在reactjs项目中如何用webpack配置组件按需加载
在使用
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"}]]
}
},只需按照我的配置形式就可以了.
以上是我的解决方案,欢迎纠错.
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
