性能优化——首屏优化

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，保证更新及时。

• 预加载关键资源：

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

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

4. 首屏渲染优化

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

• 延迟加载非关键 JS：

  <scriptsrc="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直出。