如何缩短Compile Module与Evaluate Module耗时？附示例分析

一、优化方案并非仅有两种 #

你提到的减少加载JavaScript量、减少模块副作用是核心优化方向，但还有其他可落地的方案：

• 模块加载时机优化：将非首屏必需的模块改为懒加载（比如使用动态import()），避免不必要的模块进入编译-评估流程，从根源减少这段空闲时间的产生场景
• 编译结果缓存：利用浏览器的bytecode cache机制，确保重复访问时模块编译结果可复用，跳过重复编译步骤，缩短整体流程耗时
• 模块拆分与依赖梳理：将大模块拆分为更小的、职责单一的模块，同时梳理依赖关系，避免无关模块被提前加载编译，让编译和评估的执行更紧凑
• 优化模块解析顺序：调整模块加载优先级，让首屏关键模块优先编译评估，非关键模块延后，减少关键路径上的空闲等待

二、CPU未高负载的原因 #

Compile Module与Evaluate Module之间的空闲时间，并非一定是CPU在处理任务，常见原因包括：

• IO等待：浏览器在下载完模块文件后，可能需要等待磁盘读取（比如缓存读取）或网络后续资源的确认，此时CPU处于空闲状态
• 事件循环调度间隙：浏览器的事件循环中，编译和评估任务属于宏任务，若中间插入了优先级更低的微任务或空闲回调，CPU会处理这些轻量任务但不会拉满负载
• 主线程资源调度策略：浏览器为了避免主线程过度阻塞影响交互，会主动调度任务间隔，给渲染线程、网络线程等留出执行空间，导致这段时间CPU使用率不高

内容的提问来源于stack exchange，提问作者Gajus