🔹 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，保证更新及时。
- 设置
-
预加载关键资源：
html<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：
html<script src="chart.js" defer></script>或者在业务中用
import()动态加载报表类库。
👉 实际效果：白屏时间从 2s 降到 1s，用户视觉上"更快"。
🔹 5. SSR / SSG / 预渲染
- SSR（Nuxt、Next.js）：服务端返回 HTML，客户端再激活交互。
- Prerender（预渲染插件）：对不频繁更新的页面，构建时生成静态 HTML。
👉 实际效果：首屏从"空白页面 + JS 渲染"变成"直出 HTML"，TTFB 降低 30%+。
🔹 6. 移动端专项优化
-
图片懒加载：
vue<img v-lazy="imgUrl"> -
减少大库：替换 moment.js → dayjs，lodash → lodash-es 按需引入。
-
打包分析 ：用
webpack-bundle-analyzer找出大依赖并优化。
👉 实际效果：首屏包体积缩小 200KB，弱网下加载快约 500ms。
✅ 简单总结
👉 "在实际开发中，我主要从几个方面做过首屏优化：
- 构建阶段：开启 Tree Shaking、代码分割，UI 库按需引入，把主包压到 1MB 以内；
- 静态资源：图片用 WebP 并压缩，Icon 改为 SVG Sprite，减少请求数；
- 网络层：静态资源走 CDN，设置强缓存和预加载关键资源；
- 渲染层：内联首屏 CSS，非核心 JS 延迟加载，同时加骨架屏，避免用户看到白屏；
- 特殊场景：数据量大的时候用 SSR 或预渲染，让首屏 HTML直出。