前端性能优化实战：我是如何将首屏加载时间缩短 40% 的？

1. 问题背景
   在最近的电商后台管理系统重构项目中，我们遇到了一个非常头疼的问题：随着业务逻辑的增加，打包后的 JS 文件体积超过了 3MB，导致首屏加载时间（FCP）经常突破 4 秒，用户反馈页面"白屏"时间过长。
   经过排查，发现主要瓶颈在于：
   第三方 UI 组件库（如 Element Plus）全量引入，导致包体积臃肿。
   部分非首屏路由对应的页面组件没有做懒加载。
   接口请求存在串行等待，阻塞了页面的核心渲染。
2. 优化思路与落地方案
   针对上述痛点，我主导了以下三个维度的优化：
   2.1 按需引入与 Tree-Shaking
   放弃全量引入组件库，改用 unplugin-vue-components 插件实现自动按需引入。同时，在 Vite 配置中开启 build.rollupOptions.output.manualChunks，将 Vue、Vue Router 和大型第三方库单独拆包，利用浏览器缓存。
   2.2 路由懒加载与组件异步化
   将所有非首页的路由改为动态导入（import()）。对于首页中一些非关键路径的复杂图表组件，使用 defineAsyncComponent 进行异步加载，并配合 Suspense 提供 Loading 状态，避免阻塞主线程。
   2.3 接口请求并行化
   将原本在 onMounted 中串行调用的 3 个独立接口，改为使用 Promise.all() 并行请求。同时，对高频访问但变动不频繁的数据（如字典表）引入了本地 sessionStorage 缓存机制。
3. 优化效果对比
   经过一轮优化后，我们使用 Lighthouse 进行了性能跑分对比：
   表格
   测试指标 优化前 优化后 提升幅度
   FCP (首次内容绘制) 4.2s 2.4s 42.8%
   LCP (最大内容绘制) 5.1s 3.0s 41.1%
   JS 总包体积 3.2 MB 1.1 MB 65.6%
4. 总结与避坑指南
   前端性能优化不是一蹴而就的，而是贯穿整个开发生命周期。
   避坑提醒：在做代码分割（Split Chunks）时，不要切得太细，否则会导致 HTTP 请求数激增，反而拖慢加载速度。建议将体积大于 50KB 且被多个模块引用的公共依赖进行拆分。