性能优化实践

方向

一定级别的项目肯定是需要接入监控和告警的，定位问题和优化方向都是从这里来的

• 打包构建
• 具体问题

构建

首屏优化

参考指标看这里一些介绍
https://www.cnblogs.com/onfly...

• 首字节时间

  • 请求发出到DNS服务器返回，反映网络状况

• DOM Ready时间

  • DOM 达到稳定状态的时间
• 页面完全加载时间

分析思路

统计的DOM Ready时间就是获取的window.performance.timing中的DOMContentLoadedEventEnd。以DCL为分割点，结合Performance面板来分析下DCL前后都做了什么导致首屏时间加载变慢。

实际还是需要了解页面从请求到渲染出结果的流程，针对具体的可用资源来做对应优化，所以从几个方面都可以考虑，包括客户端和服务端

• cdn解析
• tcp连接
• http请求优化
• 缓存

大致流程

可以参考network里的资源请求顺序，在spa场景下
1.请求分包资源app.js, vendor.js, 字体
2.业务接口，静态资源cdn请求

分析工具

• npm run analyz 可以生成打包文件大小图，这个可以有目的的去减少包体积
• 借助工具分析 loader/plugin的执行时间

优化实例

• 首屏图片懒加载

• 分析webpack产出的bundle大小，看能否做拆分

  • 路由懒加载
  • 组件资源按需加载(包括第三方组件引入，自定义组件加载)

构建优化思路

• loader处理内容开启缓存
• happypack开启多进程打包
• 公共模块提取，拆分入口

• 基础依赖抽离

  • 拆分dll，也存在一些弊端
  • 使用external,前提是有稳定可用的cdn服务
• css单独打包，根据entry拆分