性能优化——首屏优化

🔹 1. 构建优化，减少资源体积

• Webpack / Vite 配置压缩：使用 terser 压缩 JS，cssnano 压缩 CSS。

• Tree Shaking：在 Vue/React 项目中确保使用 ESM，剔除无用代码。

• 代码分割（按需加载）：

  • 路由懒加载：const Home = () => import('@/views/Home.vue')。
  • UI 组件库用 babel-plugin-import 或 unplugin-vue-components，避免一次性打包全部。
  • 手动分包，将一些 ui 包/图表等包从主包拆分出去。

👉 实际效果：把主包从 2MB 压到 800KB，首屏 JS 下载和解析速度明显提升。

🔹 2. 静态资源优化

• 图片优化：

  • 构建阶段用 image-webpack-loader 或 vite-imagemin 压缩图片。
  • PC 用 WebP/AVIF，移动端用合适尺寸的缩略图。

• Icon 优化：用 SVG Sprite 或 Iconfont 替代几十个小 PNG。

👉 实际效果：首页 Banner 图从 500KB 压缩到 100KB，首屏渲染快了约 300ms。

🔹 3. 网络层优化

• CDN 加速：静态资源（JS/CSS/图片）部署到 CDN，提高分发速度。

• 缓存策略：

  • 设置 Cache-Control: max-age=31536000, immutable 给带 hash 的静态文件。
  • 对 HTML 设置 no-cache，保证更新及时。

• 预加载关键资源：

  <link rel="preload" as="style" href="/css/main.css">
  <link rel="preload" as="script" href="/js/main.js">
  

👉 实际效果：全国不同地区访问首页资源响应时间缩短 100~300ms。

🔹 4. 首屏渲染优化

• 骨架屏 / Loading 占位：用 Vue/React 插件或者自己写骨架屏，避免白屏。

• 延迟加载非关键 JS：

  <script src="chart.js" defer></script>
  

  或者在业务中用 import() 动态加载报表类库。

👉 实际效果：白屏时间从 2s 降到 1s，用户视觉上“更快”。

🔹 5. SSR / SSG / 预渲染

• SSR（Nuxt、Next.js）：服务端返回 HTML，客户端再激活交互。
• Prerender（预渲染插件）：对不频繁更新的页面，构建时生成静态 HTML。

👉 实际效果：首屏从“空白页面 + JS 渲染”变成“直出 HTML”，TTFB 降低 30%+。

🔹 6. 移动端专项优化

• 图片懒加载：

  <img v-lazy="imgUrl">
  

• 减少大库：替换 moment.js → dayjs，lodash → lodash-es 按需引入。

• 打包分析：用 webpack-bundle-analyzer 找出大依赖并优化。

👉 实际效果：首屏包体积缩小 200KB，弱网下加载快约 500ms。

✅ 简单总结

👉 “在实际开发中，我主要从几个方面做过首屏优化：

1. 构建阶段：开启 Tree Shaking、代码分割，UI 库按需引入，把主包压到 1MB 以内；
2. 静态资源：图片用 WebP 并压缩，Icon 改为 SVG Sprite，减少请求数；
3. 网络层：静态资源走 CDN，设置强缓存和预加载关键资源；
4. 渲染层：内联首屏 CSS，非核心 JS 延迟加载，同时加骨架屏，避免用户看到白屏；
5. 特殊场景：数据量大的时候用 SSR 或预渲染，让首屏 HTML直出。