使用react一段时间了，感觉自己已经爱上了这种组件化开发的模式，阿里也退出了相应的UI框架Ant Design，使用起来也十分的方便。但是最近发现了一个十分严重的问题，组件开发完成进行打包时发现打包出来的文件内存达到了惊人的5m，这在浏览器上请求的速度可想而知会有多慢，打开控制台也会发现react的警告信息，以前没在意，今天就让我来看看如何解决。
image.png
警告信息中提示我们使用babel-plugin-import，点击查看了介绍后发现这是在加载器中设置完成以后，在js中引用组件时仅引入相应的js文件以及css样式，大大的减少了打包文件的内存大小，但是问题来了，webpack的配置我只能照葫芦画瓢，介绍中只有几句如何配置对于放在什么位置怎么放都没说，我蒙了......
image.png
image.png
光靠这两张图片我哪知道如何配置呢？花了一个小时在网上找相关的资料以及webpack的介绍都没有找到解决办法，没办法了只好自己慢慢摸索了。
看着别人的webpack配置文件，加上自己一次一次慢慢尝试，我终于配置好了，虽然自己不是很懂原理（我也很无奈，找时间要好好学习一下了），配置如下
image.png
这只是我自己学习配置的，有错误欢迎提出来！配置完打包的效果也十分明显
image.png
这是没有按需加载之前的文件大小
image.png
这是配置好以后打包的文件大小，效果真明显！
这次记录下来以后如果忘记了我也可以不用再努力的去找了，O(∩_∩)O哈哈~
网友评论