前端性能优化有哪些常见手段？

// 路由懒加载
const Home = lazy(() => import('./Home'))

// 图片懒加载
<img loading="lazy" src="image.jpg" />

// 动态导入
const module = await import('./heavy-module')

<!-- 预加载关键资源 -->
<link rel="preload" href="/critical.js" as="script">
<link rel="preload" href="/font.woff2" as="font" crossorigin>

<!-- 预连接 -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- 预获取（空闲时） -->
<link rel="prefetch" href="/next-page.js">

// react-window
import { FixedSizeList } from 'react-window'
<FixedSizeList height={600} itemCount={10000} itemSize={35}>
  {Row}
</FixedSizeList>

<!-- 响应式图片 -->
<img src="small.jpg" 
     srcset="medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw">

<!-- 现代格式 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg">
</picture>

// Vite 构建
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es', 'dayjs']
        }
      }
    },
    minify: 'terser',
    cssCodeSplit: true
  }
})