react项目打包完后3M多如何优化

Question

项目打包完后有3M多，查了一下资料，将antd按需引入将项目缩小到1.7M但还是大。
请各位给点建议。
期望给的建议详细点。

项目使用react最新脚手架起的

Answer 1

把sourcemap关了啊 那个就好大了

Answer 2

如果用了antd的话，哪怕按需加载也会很大的。

装一个插件webpack-bundle-analyzer，它会告诉你打包的结果文件中，哪个包太大了。

对于antd来说，在3.9版本以后，icon使用了离线模式，所以超级大，解决办法: antd 12011，这样会小掉很多。

同时要注意的是，除了你自己使用Icon外，一些组件和函数中也会使用Icon的，比如常见的分页按钮、message弹框的警告、成功符号，记得这些也要加上去

这样的话，antd的包就小很多了。

另外，还要注意一个webpack的externals属性，也可以把一些包排除在外不打包到bundle中，而是前端通过js引用。

Answer 3

无非就是懒加载、tree-shaking，还有 source-map 什么的，图片之类的压缩下。

但我觉的把，1、2MB 还好啦，启用 gzip 以后配合缓存其实都在可接受范围了，现在谁还会心疼那几个流量，另外在生产环境，除了移动端，PC端带宽足够快的情况下基本没什么问题。