性能优化实践

方向

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

  • 打包构建
  • 具体问题

构建

首屏优化

参考指标看这里一些介绍
https://www.cnblogs.com/onfly...
性能优化实践_第1张图片

  • 首字节时间

    • 请求发出到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拆分

你可能感兴趣的:(前端,javascript,vue.js)