如何结合缓存、代码分割与资源策略优化构建产物

# 核心结论

构建产物优化不能只追求压缩后的总体积更小，而应同时优化首屏关键资源、按需加载、解析执行成本、缓存命中率和版本切换安全性。通常应以路由或低频功能作为代码分割边界，让首屏只包含当前页面必需代码；对带内容哈希的静态资源设置长期强缓存，对负责引用当前资源版本的入口 HTML 使用短缓存或协商缓存；部署时让新旧哈希资源共存一段时间，避免旧页面请求已被删除的资源。图片、字体和第三方库也属于构建产物治理范围，不能只分析 JavaScript。

# 底层机制

代码分割常通过动态 import() 实现。它能减少初始下载、解析和编译的代码，但会增加请求调度与运行时管理成本。合理边界应对应真实使用概率，例如图表、富文