前端优化纪实

前言

要优化一个老项目，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的语言部分做了剔除。