性能优化实践

方向

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

• 打包构建
• 具体问题

构建

首屏优化

参考指标看这里一些介绍
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 拆分