一、测试
用于生产部署的负载性能分析:
WebPageTest
PageSpeed Insights
用于本地开发期间的性能分析:
Chrome 开发者工具“性能”面板
app.config.performance 将会开启 Vue 特有的性能标记,标记在 Chrome 开发者工具的性能时间线上。
Vue 开发者扩展也提供了性能分析的功能
二、Web应用性能
1、页面加载性能:应用展示出内容及达到可交互状态的速度(最大内容绘制LCP及首次输入延迟FID)
2、更新性能:应用响应用户输入的速度
页面加载优化有许多跟框架无关的方面 - 这份 web.dev 指南值得一看。
最后也是最重要的根据所需选择对应的架构很关键:
1、如果对性能很敏感,则使用SSR即由服务端渲染或者SSG静态站点生成用户想看的HTML内容,避免纯客户端SPA,必须使用SPA则将营销相关页面单独部署。
2、一个最有效的提升页面加载速度的方法就是压缩 JavaScript 打包产物的体积:
1、 尽可能采用构建步骤(tree-shake不打包未使用到的模块)
2、预编译,无需载入vue编译器
3、使用构建步骤并选择ES模块依赖,如lodash-es而非lodash
4、查看依赖体积,评估所提供的功能与体积间的性价比,bundlejs.com 工具可以自查,tree-shake在依赖友好下取决你引入的API