优化页面加载速度要从打包、资源、路由多维度入手，核心是减小首屏体积、减少请求。首选路由懒加载，用动态 import 拆分代码块，只加载当前页面组件。开启 Vite 的 Tree Shaking 剔除无用代码，压缩 JS/CSS 和图片。静态资源托管到 CDN，图片转 WebP 格式，小图片转为 base64。配置服务器开启 gzip 压缩，降低传输大小。还能做预渲染、预加载关键资源，移除未使用的插件和依赖。精简全局引入，避免全量加载组件库。这套组合方案能有效解决白屏问题，大幅缩短首屏加载时间，提升用户体验。
长列表性能瓶颈是海量 DOM 渲染，核心优化方案是虚拟滚动，只渲染可视区域内的列表项，而非全部数据，DOM 数量从成千上万降到几十个，流畅度暴增。可使用 vue-virtual-scroller 等成熟库，也能自定义实现。辅助优化：v-for 必须绑定唯一稳定 key，避免无效渲染；用 Object.freeze 冻结纯展示数据，关闭响应式减少开销；给滚动事件加防抖节流；简化列表项的 DOM 结构，避免嵌套复杂组件。也可采用分页、无限滚动分片加载，不一次性渲染全部数据，兼顾性能与功能。
图片懒加载是延迟加载可视区域外的图片，减少首屏请求量。Vue3 中最便捷的是使用vue-lazyload插件，全局注册后将图片src替换为v-lazy指令即可。也能自定义懒加载指令，基于IntersectionObserverAPI 监听元素可视状态，性能更好、无侵入。懒加载时搭配占位图或低清缩略图，优化视觉体验。同时配合图片压缩、格式转换、响应式图片使用。禁止页面初始化时加载所有图片，尤其长列表、商品页，能大幅降低首屏资源加载压力，让页面更快渲染完成。
Vite 是 Vue3 官方构建工具，本身性能极强，再配合配置优化就能拉满效果。开启依赖预构建，缓存第三方库，避免重复解析。生产环境配置打包选项，开启 CSS 分割、代码压缩，移除 console 和注释，关闭 sourcemap。大型第三方库改用 CDN 引入，脱离打包流程。使用自动导入插件，按需引入组件和 API，减少冗余代码。开启 gzip/brotli 压缩插件，缩小打包体积。开发环境关闭无用插件，提升热更新速度。Vite 结合这些优化，开发体验流畅，生产环境打包体积更小、运行更快。
第三方库是项目体积大户，优化核心是按需使用、减小体积。杜绝全量引入组件库，用自动导入插件只打包用到的组件。替换重型库为轻量替代，比如用体积更小的 dayjs 替代 moment.js。大型不常更新的库用 CDN 引入，不打包进主包。配置 Tree Shaking 剔除库中无用代码，将第三方库单独分包，利用浏览器缓存。避免重复引入多个版本的相同库，统一依赖版本。还能动态导入库，用到时再加载，不占用首屏资源。这些方法能大幅缩减打包体积，提升页面加载和运行速度。
Vue3 提供了完整的错误处理体系，避免页面崩溃。全局通过app.config.errorHandler捕获组件渲染、指令、侦听器的所有错误，统一做提示、日志上报。用onErrorCaptured钩子实现错误边界，捕获子组件错误，防止全局崩溃。异步请求、定时器等错误用 try/catch 捕获，配合 axios 响应拦截统一处理。路由守卫中处理跳转异常，图片等资源加载错误加监听兜底。开发环境清晰提示错误，生产环境静默处理并上报。全局兜底 + 局部捕获，既能保证页面稳定性，又能快速定位修复问题。
