1
<!-- 使用WebP格式 -->
2
<picture>
3
  <source srcset="image.webp" type="image/webp">
4
  <source srcset="image.jpg" type="image/jpeg">
5
  <img src="image.jpg" alt="描述">
6
</picture>
7

8
<!-- 响应式图片 -->
9
<img
10
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
11
  sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
12
  src="large.jpg"
13
  alt="响应式图片"
14
>
15

16
<!-- 懒加载 -->
17
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="懒加载图片">

1
import React, { Suspense, lazy } from 'react';
2

3
// 路由懒加载
4
const Home = lazy(() => import('./pages/Home'));
5
const About = lazy(() => import('./pages/About'));
6
const Dashboard = lazy(() => import('./pages/Dashboard'));
7

8
function App() {
9
  return (
10
    <Suspense fallback={<Loading />}>
11
      <Routes>
12
        <Route path="/" element={<Home />} />
13
        <Route path="/about" element={<About />} />
14
        <Route path="/dashboard" element={<Dashboard />} />
15
      </Routes>
16
    </Suspense>
17
  );
18
}

1
// webpack配置
2
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
3

4
module.exports = {
5
  plugins: [
6
    new ImageMinimizerPlugin({
7
      minimizer: {
8
        implementation: ImageMinimizerPlugin.imageminMinify,
9
        options: {
10
          plugins: [
11
            ['mozjpeg', { quality: 80 }],
12
            ['pngquant', { quality: [0.6, 0.8] }],
13
            ['svgo', { plugins: [{ removeViewBox: false }] }],
14
          ],
15
        },
16
      },
17
    }),
18
  ],
19
};

1
// React虚拟列表示例
2
import { FixedSizeList } from 'react-window';
3

4
function VirtualList({ items }) {
5
  const Row = ({ index, style }) => (
6
    <div style={style}>
7
      {items[index].name}
8
    </div>
9
  );
10

11
  return (
12
    <FixedSizeList
13
      height={400}
14
      itemCount={items.length}
15
      itemSize={50}
16
      width="100%"
17
    >
18
      {Row}
19
    </FixedSizeList>
20
  );
21
}

1
function SkeletonCard() {
2
  return (
3
    <div className="skeleton-card">
4
      <div className="skeleton-image animate-pulse"></div>
5
      <div className="skeleton-title animate-pulse"></div>
6
      <div className="skeleton-text animate-pulse"></div>
7
    </div>
8
  );
9
}
10

11
function ProductList({ loading, products }) {
12
  if (loading) {
13
    return Array(6).fill(0).map((_, i) => <SkeletonCard key={i} />);
14
  }
15
  return products.map(p => <ProductCard key={p.id} product={p} />);
16
}

1
// 页面加载性能
2
window.addEventListener('load', () => {
3
  const timing = performance.timing;
4
  const metrics = {
5
    // DNS查询时间
6
    dns: timing.domainLookupEnd - timing.domainLookupStart,
7
    // TCP连接时间
8
    tcp: timing.connectEnd - timing.connectStart,
9
    // 首字节时间
10
    ttfb: timing.responseStart - timing.requestStart,
11
    // DOM解析时间
12
    domParse: timing.domContentLoadedEventEnd - timing.domLoading,
13
    // 页面完全加载时间
14
    loadTime: timing.loadEventEnd - timing.navigationStart,
15
  };
16
  console.log(metrics);
17
  // 上报到监控系统
18
});
19

20
// 监控LCP
21
new PerformanceObserver((entryList) => {
22
  const entries = entryList.getEntries();
23
  const lastEntry = entries[entries.length - 1];
24
  console.log('LCP:', lastEntry.startTime);
25
}).observe({ entryTypes: ['largest-contentful-paint'] });