1. 构建优化减少资源体积Webpack / Vite 配置压缩使用terser压缩 JScssnano压缩 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-age31536000, immutable给带 hash 的静态文件。对 HTML 设置no-cache保证更新及时。预加载关键资源linkrelpreloadasstylehref/css/main.csslinkrelpreloadasscripthref/js/main.js实际效果全国不同地区访问首页资源响应时间缩短 100~300ms。4. 首屏渲染优化骨架屏 / Loading 占位用 Vue/React 插件或者自己写骨架屏避免白屏。延迟加载非关键 JSscriptsrcchart.jsdefer/script或者在业务中用import()动态加载报表类库。实际效果白屏时间从 2s 降到 1s用户视觉上“更快”。5. SSR / SSG / 预渲染SSRNuxt、Next.js服务端返回 HTML客户端再激活交互。Prerender预渲染插件对不频繁更新的页面构建时生成静态 HTML。实际效果首屏从“空白页面 JS 渲染”变成“直出 HTML”TTFB 降低 30%。6. 移动端专项优化图片懒加载img v-lazyimgUrl减少大库替换 moment.js → dayjslodash → lodash-es 按需引入。打包分析用webpack-bundle-analyzer找出大依赖并优化。实际效果首屏包体积缩小 200KB弱网下加载快约 500ms。简单总结在实际开发中我主要从几个方面做过首屏优化构建阶段开启 Tree Shaking、代码分割UI 库按需引入把主包压到 1MB 以内静态资源图片用 WebP 并压缩Icon 改为 SVG Sprite减少请求数网络层静态资源走 CDN设置强缓存和预加载关键资源渲染层内联首屏 CSS非核心 JS 延迟加载同时加骨架屏避免用户看到白屏特殊场景数据量大的时候用 SSR 或预渲染让首屏 HTML直出。