一、测试
用于生产部署的负载性能分析：
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
网友评论