🚀前端性能优化实录:把 5 秒白屏降到 1.2 秒,只做 7 件事

真实项目优化实录:从 5 秒白屏到 1.2 秒加载完成,Vite 项目性能优化全攻略,附可直接复用的代码片段。


📊 优化成绩单

指标 优化前 优化后 收益
首屏加载 5.2 s 1.2 s ↓ 77 %
LCP(最大内容绘制) 4.1 s 1.0 s ↓ 76 %
JS 体积 1.8 MB 480 KB ↓ 73 %
图片总重 6.4 MB 1.9 MB ↓ 70 %

一、代码体积瘦身:Vite + 优化

1. 代码分割 + Tree-Shaking

javascript 复制代码
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0];
          }
        },
      },
    },
  },
});
  • 代码分割 :Vite 默认支持代码分割,通过 manualChunks 可以进一步自定义代码分割逻辑。
  • Tree-Shaking:Vite 默认启用,移除未使用的代码。

2. 压缩代码

javascript 复制代码
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import TerserPlugin from 'terser-webpack-plugin';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0];
          }
        },
      },
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      minify: true,
    },
  },
  plugins: [
    {
      name: 'terser',
      enforce: 'minimize',
      options: {
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      },
    },
  ],
});
  • TerserPlugin :进一步压缩代码,移除 console.log 等调试信息。

二、资源优化:图片、字体、静态资源

1. 图片优化

  • WebP/AVIF:使用现代图片格式,体积更小,质量更高。
  • 懒加载:按需加载图片,减少首屏加载时间。
javascript 复制代码
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { VitePluginLazyload } from 'vite-plugin-lazyload';

export default defineConfig({
  plugins: [vue(), VitePluginLazyload()],
});
html 复制代码
<img data-src="image.webp" class="lazy" />
<script>
  new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy');
      }
    });
  }).observe(document.querySelectorAll('.lazy'));
</script>

2. 字体优化

  • 按需加载:只加载需要的字体样式。
  • 预加载 :使用 <link rel="preload"> 预加载关键字体。
html 复制代码
<link rel="preload" href="/fonts/Roboto.woff2" as="font" type="font/woff2" crossorigin />

三、网络优化:CDN、缓存

1. 使用 CDN

  • CDN:将静态资源部署到 CDN,减少服务器压力,加速加载。
javascript 复制代码
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    assetsDir: 'static',
    assetsInlineLimit: 4096, // 小于 4KB 的资源内联
  },
});

2. 缓存策略

  • 缓存控制:设置 HTTP 缓存头,减少重复请求。
javascript 复制代码
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    headers: {
      'Cache-Control': 'public, max-age=31536000',
    },
  },
});

四、首屏优化:骨架屏、预渲染

1. 骨架屏

  • 骨架屏:在内容加载完成前显示占位图,提升用户体验。
html 复制代码
<div class="skeleton">
  <div class="skeleton-header"></div>
  <div class="skeleton-content"></div>
</div>
css 复制代码
.skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.skeleton-header {
  width: 100%;
  height: 50px;
  background: linear-gradient(90deg, #f0f0f0, #e0e0e0, #f0f0f0);
  background-size: 200% 200%;
  animation: skeleton 1.5s infinite;
}
.skeleton-content {
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0, #e0e0e0, #f0f0f0);
  background-size: 200% 200%;
  animation: skeleton 1.5s infinite;
}
@keyframes skeleton {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

2. 预渲染

  • 预渲染:使用 Vite 插件进行预渲染,减少首屏加载时间。
javascript 复制代码
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vitePrerender from 'vite-plugin-prerender';

export default defineConfig({
  plugins: [vue(), vitePrerender()],
});

五、性能监控:Lighthouse、Web Vitals

1. Lighthouse

  • Lighthouse:使用 Lighthouse 定期检查性能,找出瓶颈。
bash 复制代码
npm install -g lighthouse
lighthouse https://your-site.com --view

2. Web Vitals

  • Web Vitals:监控关键性能指标,如 LCP、FID、CLS。
javascript 复制代码
import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

六、代码优化:减少重绘、重排

1. 避免强制同步布局(FLS)

  • FLS:避免在 JavaScript 中频繁读写布局属性。
javascript 复制代码
// 避免
const width = element.offsetWidth;
element.style.width = width + 10 + 'px';

// 推荐
element.style.width = element.offsetWidth + 10 + 'px';

2. 使用 CSS 动画

  • CSS 动画:使用 CSS 动画而不是 JavaScript 动画,减少重绘和重排。
css 复制代码
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
html 复制代码
<div class="fade-in"></div>

七、总结:7 步优化流程

  1. 代码分割 + Tree-Shaking:减少代码体积。
  2. 图片优化:使用现代格式、懒加载。
  3. 网络优化:使用 CDN、设置缓存。
  4. 首屏优化:骨架屏、预渲染。
  5. 性能监控:Lighthouse、Web Vitals。
  6. 代码优化:减少重绘、重排。
  7. 持续优化:定期检查、优化。

🏁 一句话总结

通过 Vite + 7 招优化,我们的项目从 5 秒白屏降到 1.2 秒加载完成,性能提升 77%。把这份优化清单贴在工位

相关推荐
haruma sen24 分钟前
Spring面试
java·spring·面试
素界UI设计35 分钟前
开源网页生态掘金:从Bootstrap二次开发到行业专属组件库的技术变现
前端·开源·bootstrap
潘小安36 分钟前
【译】六个开发高手使用的 css 动画秘诀
前端·css·性能优化
前端开发爱好者1 小时前
尤雨溪官宣:Vite 历史性的一刻!超越 Webpack!
前端·javascript·vite
前端开发爱好者1 小时前
Vue3 "抛弃" Axios !用上了 专属请求库!
前端·javascript·vue.js
前端开发爱好者1 小时前
"Lodash" 的终极版!Vue、React 通杀!
前端·javascript·全栈
前端开发爱好者1 小时前
TanStack:不止于 Vue!一个库,真·通杀所有框架!
前端·javascript·vue.js
WBluuue1 小时前
数据结构与算法:哈希函数的应用及一些工程算法
c++·算法·面试·哈希算法
curdcv_po1 小时前
Three.js,给纹理,设颜色空间
前端
站大爷IP1 小时前
HTTPS代理抓包完全攻略:工具、配置与高级技巧
前端