实战剖析-vue项目首屏加载时长优化
💡
原文中文，约3500字，阅读约需9分钟。
📝
内容提要
本文介绍了Vue项目首屏加载时间优化的方法，包括资源加载、代码执行和页面绘制的分析，拆包、异步加载、按需引入、缓存数据等优化思路，以及减少包体积、按需引入第三方库等优化方向。还介绍了prefetch加载方案和tree-shaking技术的应用。解决了通过路由拦截实现用户授权数据分析的问题，并提出了对已授权用户数据的缓存方案。最后提到了压缩代码的方法。
🎯
关键要点
-
首屏速度是用户体验的关键因素，主要受资源加载速度影响。
-
页面加载时间由资源加载、代码执行和页面绘制构成。
-
使用Chrome开发者工具分析页面加载过程，识别资源加载和执行时间。
-
优化思路包括拆包、异步加载、按需引入、缓存数据等。
-
使用gzip压缩和webpack/vite对代码进行压缩以减少包体积。
-
通过命令行生成打包报告，分析文件体积问题。
-
使用cdn引入模块以避免重复引入，优化nutui模块和lodash库的引入方式。
-
prefetch加载方案可用于异步加载组件，Vue 2.x支持动态导入实现类似功能。
-
tree-shaking技术可优化第三方库的引入，减少打包体积。
-
通过路由拦截实现用户授权数据分析，解决二次跳转问题。
-
对已授权用户数据进行缓存，减少页面刷新请求。
-
利用nginx和webpack/vite进行资源和代码压缩，提升加载效率。
➡️
