模块化体系与按需加载原理

冷启动加速的核心在于按需加载，即只在需要时才加载对应的模块代码。理解不同模块系统的加载原理是设计懒加载方案的基础。本章聚焦 ES Module 的 import() 与 CommonJS 的 require.resolve()，揭示两者在加载时机、执行时机上的根本差异，并说明如何利用这些差异实现动态模块懒加载。

1. 模块系统的演化与分类

前端模块系统经历了从 CommonJS（Node.js 原生）、AMD（如 RequireJS）到 ES Module（ESM）的演进。当前浏览器与 Node.js 均原生支持 ESM，但 CommonJS 仍在大量现有工程中使用。两种系统在动态导入上的对比如下：

2. ES Module 动态 import

ES Module 的 import() 是一个函数形式的动态导入，返回一个 Promise，解析为模块的命名空间对象。它实现了加载时机与执行时机分离：浏览器可以在空闲时发起模块请求，只有 Promise 被 await 或 .then 后模块代码才被执行。

// main.js —— 主模块不直接导入，而是动态按需加载
async function loadChartModule() {
  try {
    const chartModule = await import('./chart.js');
    chartModule.render('#container');
  } catch (err) {
    console.error('图表模块加载失败:', err);
  }
}

// 用户点击按钮时才触发加载
document.getElementById('btn').addEventListener('click', loadChartModule);

动态 import() 返回的模块对象具有与静态导入相同的特性：自动采用严格模式、支持顶级 await、模块内变量不会泄漏到全局。执行时机完全由调用方控制，这是实现懒加载的关键。

3. CommonJS require 与 require.resolve

CommonJS 的 require() 是同步的，当 Node.js 遇到 require('./a') 时，会立即加载文件、解析依赖、执行模块代码，然后将 module.exports 缓存并返回。这意味着加载时机与执行时机完全耦合，无法实现真正的“按需执行”。

require.resolve() 是 Node.js 提供的一个辅助方法，它执行模块解析算法，返回模块的路径，但不加载也不执行模块。这一特性可用于预检测模块是否存在，或配合其他机制实现条件加载。

// 使用 require.resolve 检查模块是否存在
let modulePath;
try {
  modulePath = require.resolve('./optional-plugin.js');
} catch (e) {
  // 模块不存在，使用 fallback
  modulePath = require.resolve('./default-plugin.js');
}

// 真正加载在后续进行
const plugin = require(modulePath);

需要注意的是，require.resolve() 仅解析路径，不执行缓存，但之后正式 require() 时仍会走标准加载流程。它不是动态导入的替代品，而是用于预判断和环境适配。

4. 加载时机与执行时机分离的价值

分离的价值在于控制代码生效的时间点。一个模块从源代码到可执行，经历“下载/读取文件 → 解析 AST → 编译 → 执行”几个阶段。ES Module 允许将“下载 + 解析 + 编译”提前（预加载），而将“执行”延后到真正需要的时刻。

下图对比了两种模块系统在按需加载场景下的流程差异：

5. 调试与常见错误

动态 import() 的调试主要依赖浏览器 DevTools：

• Network 面板：观察模块文件是否被正确请求，请求时间点是否符合预期。
• Source 面板：动态加载的模块会在“Network”标签下出现，但可能不会出现在源码树中；可通过 Debugger 在 import() 回调中打断点。
• Console 错误：模块加载失败时，Promise 会 reject，留意 TypeError: Failed to fetch（CORS、404 等）或 SyntaxError（模块内语法错误）。

6. 性能优化最佳实践

• 预加载提示：在 <head> 中添加 <link rel="modulepreload" href="/path/to/module.js">，让浏览器提前下载资源，但不会执行。
• 代码分割：配合 Webpack / Vite 等打包工具，将动态 import() 作为分割点，生成独立 chunk。但要注意 chunk 命名策略，避免缓存失效。
• 错误处理：始终为 import() 添加 .catch() 或 try...catch，避免未捕获的 Promise reject 导致白屏。
• 避免过度分割：每个动态导入都会产生一次网络请求，过小的模块分割会增加请求数量，应结合首屏渲染路径合理划分懒加载边界。

7. 小结