冷启动与懒加载核心概念

冷启动速度是前端性能的核心战场——用户首次打开应用时的每一毫秒等待都在消耗留存率。本章理清三个底层概念：冷启动时间如何定义、动态模块与静态模块的本质差异、以及懒加载在量化层面如何改变启动性能曲线。

1.1 冷启动时间定义

冷启动指用户从输入 URL（或点击图标）到应用首屏渲染完成且可交互的全过程。与热启动不同，冷启动时浏览器或容器无缓存、无预加载数据，每一步资源获取都是真实的网络请求。

• 核心指标：FCP（首次内容绘制）、LCP（最大内容绘制）、TTI（可交互时间）。
• 典型瓶颈阶段：网络延迟、DNS 解析、TCP/SSL 握手、HTML 下载、CSS/JS 解析与执行、布局渲染。
• 常见度量单位：毫秒（ms），业界基准“3 秒法则”即冷启动应在 3s 内完成首屏呈现。

1.2 动态模块 vs 静态模块

静态模块在编译时确定，全部打包进初始 bundle；动态模块则通过运行时异步 import() 按需加载。两者的核心差异决定了启动时的资源负载。

import { HeavyChart, HeavyTable } from './heavy-components';

const HeavyChart = React.lazy(() => import('./heavy-components/HeavyChart'));
const HeavyTable = () => import('./heavy-components/HeavyTable');  // 普通动态导入

1.3 懒加载对启动速度的影响度量

懒加载通过将非首屏模块延迟到用户交互或渲染空闲时才请求，直接缩减初始资源体积。下面用一组模拟数据说明量化影响：

• 初始 bundle 大小：从 600KB（全静态）降至 200KB（懒加载核心模块）
• 首屏加载时间：从 2.8s 降至 1.3s（4Mbps 网络，无缓存）
• TTI 优化：从 3.5s 降至 1.8s
• 代价：多出 2~4 个异步 chunk 请求，适合低延迟网络环境