关于vue项目里的性能

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容