性能优化——首屏优化

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

  • Webpack / Vite 配置压缩 :使用 terser 压缩 JS,cssnano 压缩 CSS。

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

  • 代码分割(按需加载)

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

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


🔹 2. 静态资源优化

  • 图片优化

    • 构建阶段用 image-webpack-loadervite-imagemin 压缩图片。
    • PC 用 WebP/AVIF,移动端用合适尺寸的缩略图。
  • Icon 优化 :用 SVG SpriteIconfont 替代几十个小 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。


✅ 简单总结

👉 "在实际开发中,我主要从几个方面做过首屏优化:

  1. 构建阶段:开启 Tree Shaking、代码分割,UI 库按需引入,把主包压到 1MB 以内;
  2. 静态资源:图片用 WebP 并压缩,Icon 改为 SVG Sprite,减少请求数;
  3. 网络层:静态资源走 CDN,设置强缓存和预加载关键资源;
  4. 渲染层:内联首屏 CSS,非核心 JS 延迟加载,同时加骨架屏,避免用户看到白屏;
  5. 特殊场景:数据量大的时候用 SSR 或预渲染,让首屏 HTML直出。
相关推荐
我真的是大笨蛋9 小时前
JVM调优总结
java·jvm·数据库·redis·缓存·性能优化·系统架构
^Rocky10 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
步步为营DotNet11 小时前
5-2EFCore性能优化
数据库·性能优化·.net
用户689081549059715 小时前
vue2 如何设置让 第三方类库或者静态资源,比如echarts 包 或者 element-ui 设置为强缓存
性能优化
拾忆,想起15 小时前
Redis复制延迟全解析:从毫秒到秒级的优化实战指南
java·开发语言·数据库·redis·后端·缓存·性能优化
禹曦a17 小时前
JavaScript性能优化实战指南
开发语言·javascript·性能优化
wallflower202020 小时前
Web Workers:前端多线程解决方案
性能优化·html
努力的小郑20 小时前
MySQL索引(三):字符串索引优化之前缀索引
后端·mysql·性能优化
摘星编程1 天前
ChatGPT 协作排查:Node.js 内存泄漏的定位与修复
chatgpt·性能优化·node.js·ai辅助调试·chatgpt协作