AWS CloudFront 配合 HTTP/2 推送Yi经不新鲜，但真正提升感知速度的是：

SPLIT CHUNKS：将框架库抽离成 vendor 包，实现长久缓存。

PREFETCH / PRELOAD：#router# 路由对应的 chunk 在用户即将进入时提前拉取。

CACHE‑FIRST SERVICE WORKER：#offline# 场景下先读本地，再回源请求Zui新版本。

// webpack.config.js 示例片段
module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    test: /node_modules/,
                    name: 'vendors',
                    enforce: true,
                },
            },
        },
        runtimeChunk: { name: 'runtime' },
        usedExports: true, // Tree Shaking 开关
    },
};

LCP/FID/CLS 等关键指标Ke以通过 web‑vitals 库直接发送给后台Zuo聚合分析，从而发现真实环境中的瓶颈点。

import { getCLS, getFID, getLCP } from 'web-vitals';
function report {
   const payload = JSON.stringify({
       name: metric.name,
       value: metric.value,
       ua: navigator.userAgent,
       conn: navigator.connection?.effectiveType || 'unknown',
   });
   navigator.sendBeacon;
}
getCLS;
getFID;
getLCP;

Etag / If‑None‑Match：Differential geng新只传递变动部分。

CORS‑Preflight 缓存：Add “Access-Control-Max-Age” 减少 OPTIONS 请求次数。

X‑Content‑Type‑Options:No Sniff 防止错误解析导致额外请求。

// 错误写法：每次循环dou强制回流
for {
   const h = el.offsetHeight;      // 强制布局计算
   el.style.top = `${i*10}px`;     // 
触发布局
}
// 正确Zuo法：一次性读取后批量写入
const heights = ;
for {
   heights.push;
}
for {
   el.style.top = `${i*10}px`;
}