前言
要优化一个老项目,webpack3的React+antd3 PC项目。
优化前
PPE Load: 3.97
开始
分析
- 项目的js产物只有一个,index.js,大小达到了4.62MB,是体积优化的对象
- 对于node_module部分,而这4.62MB里大部分都是一些依赖,可以用删去重复的依赖,分包,按需加载。
- 对于业务代码部分,可以看到图2分析的页面是spa里的一个单页,但加载的index.js里包含了其他页面的业务代码,可以使用路由懒加载去解决。
体积
常规
- 升级webpack版本到4。
工欲善其事必先利其器。主流的webpack版本能找到的文档也多一点。
之前是用的部门自封装的脚手架,这次直接换成最新的。脚手架用的umi-cli再封装的一层,感兴趣的可以看看。 - moment
最优解是moment可以用 date-fns 按需引入进行替换。
但是项目引入了一些组件使用了moment,所以是对moment的语言部分做了剔除。