Loading...

JavaScript模块化底层原理—CommonJS与ESM的加载机制差异|新宇宙博客

技术

39 分钟

模块化底层原理

JavaScript 进阶

Site Owner

Published on 2026-05-21

系统讲解CommonJS值拷贝与循环依赖处理、ESM实时绑定与静态分析、Tree Shaking条件限制及代码分割策略

模块化底层原理

模块化底层原理

JavaScript 模块化经历了从 IIFE → CommonJS → AMD → UMD → ESM 的演进。ESM（ES Modules）是语言规范级别的模块系统，具有静态分析能力和 Tree-Shaking 支持。本文深入解析模块加载、解析、链接和求值的底层流程，以及 CJS 与 ESM 的互操作性。

目录

模块化发展历史
CommonJS 运行机制
ESM 的三阶段加载
静态分析与 Tree-Shaking
循环依赖处理
CJS 与 ESM 互操作
动态 import() 与代码分割
实战案例
深度追问
总结表格

1. 模块化发展历史

// 代码示例 1：各时代模块化方案
// 1. IIFE 时代（2005-2009）
var Module = (function() {
  var private = 'secret';
  return { getSecret: function() {  private; } };
})();


 fs = ();
. = { : fs. };


([, ], () {
   {  };
});


(() {
   ( define ===  && define.) ([], factory);
    (  === ) . = ();
   root. = ();
})(, () {  {}; });


 { readFile }  ;
  () {  }

// 代码示例 2：Node.js 的模块包装
// Node.js 实际将你的代码包装在函数中：
(function(exports, require, module, __filename, __dirname) {
  // 你的模块代码在这里执行
  const dep = require('./dep');
  exports.foo = 'bar';
});

// require 的简化实现
function require(id) {
  // 1. 路径解析
  const filepath = resolveModule(id);
  
  // 2. 缓存检查
  if (require.cache[filepath]) {
    return require.cache[filepath].exports;
  }
  
  // 3. 创建模块对象
  const module = { exports: {}, id: filepath, loaded: false };
  require.cache[filepath] = module;
  
  // 4. 执行模块代码
  const code = fs.readFileSync(filepath, 'utf-8');
  const wrapper = new Function('exports', 'require', 'module', '__filename', '__dirname', code);
  wrapper(module.exports, require, module, filepath, path.dirname(filepath));
  
  // 5. 标记加载完成
  module.loaded = true;
  return module.exports;
}
require.cache = {};

// 代码示例 3：ESM 加载过程
// 阶段1：构造（Construction）— 下载并解析，建立模块图
// 阶段2：实例化（Instantiation）— 分配内存，建立绑定（不赋值）
// 阶段3：求值（Evaluation）— 执行代码，填充绑定值

// ESM 的 live binding（活绑定）
// counter.mjs
export let count = 0;
export function increment() { count++; }

// main.mjs
import { count, increment } from './counter.mjs';
console.log(count);   // 0
increment();
console.log(count);   // 1（实时反映变化！CJS 做不到）

// 代码示例 4：CJS 导出的是值的拷贝
// counter.cjs
let count = 0;
module.exports = { count, increment() { count++; } };

// main.cjs
const { count, increment } = require('./counter.cjs');
console.log(count);   // 0
increment();
console.log(count);   // 0!!! 仍然是旧值（值拷贝）

// 代码示例 5：Tree-Shaking 要求
// ✅ 可以 Tree-Shake（静态导入）
import { used } from './utils.js';

// ❌ 无法 Tree-Shake
const utils = require('./utils');      // CJS 是运行时
import * as all from './utils.js';     // 命名空间导入难以分析
const fn = condition ? a : b;          // 动态引用

// 副作用标记 (package.json)
// { "sideEffects": false } — 告诉打包器所有文件无副作用
// { "sideEffects": ["*.css", "./src/polyfills.js"] } — 指定有副作用的文件

// 代码示例 6：ESM 中的循环依赖
// a.mjs
import { b } from './b.mjs';
export const a = 'A(' + b + ')';

// b.mjs
import { a } from './a.mjs';
export const b = 'B(' + a + ')';

// 执行结果取决于哪个模块先被求值：
// 如果 a.mjs 先求值：
//   a.mjs 导入 b → b.mjs 开始求值 → 此时 a 是 undefined（未初始化）
//   b = 'B(undefined)' → a = 'A(B(undefined))'

// CJS 的循环依赖：返回部分导出
// a.cjs
exports.loaded = false;
const b = require('./b.cjs'); // b 拿到 a 的部分导出
exports.loaded = true;

// 代码示例 7：互操作规则

// ESM 导入 CJS（Node.js 支持）
import pkg from './cjs-module.cjs';       // 默认导入 = module.exports
import { named } from './cjs-module.cjs'; // 命名导入（Node.js 会尝试静态分析）

// CJS 导入 ESM（需要 dynamic import）
// const esm = require('./esm-module.mjs'); // ❌ 不支持！
const esm = await import('./esm-module.mjs'); // ✅ 动态导入

// package.json 的 exports 字段（条件导出）
// {
//   "exports": {
//     ".": {
//       "import": "./dist/esm/index.js",
//       "require": "./dist/cjs/index.js"
//     }
//   }
// }

// 代码示例 8：动态导入模式
// 条件加载
const locale = navigator.language;
const messages = await import(`./i18n/${locale}.js`);

// 路由级代码分割
const routes = {
  '/home': () => import('./pages/Home.js'),
  '/about': () => import('./pages/About.js'),
  '/dashboard': () => import('./pages/Dashboard.js'),
};

async function loadRoute(path) {
  const loader = routes[path];
  if (!loader) throw new Error('404');
  const module = await loader();
  return module.default;
}

// 预加载（提升体验）
function prefetchRoute(path) {
  const link = document.createElement('link');
  link.rel = 'modulepreload';
  link.href = routes[path].toString().match(/import\('(.+)'\)/)?.[1];
  document.head.appendChild(link);
}

// 动态远程模块加载
async function loadRemoteModule(url, moduleName) {
  const container = await import(/* webpackIgnore: true */ url);
  await container.init(__webpack_share_scopes__.default);
  const factory = await container.get(moduleName);
  return factory();
}

// 使用
const RemoteHeader = await loadRemoteModule(
  'https://cdn.example.com/header/remoteEntry.js',
  './Header'
);

class ModuleLoader {
  #modules = new Map();
  #baseUrl;
  
  constructor(baseUrl) {
    this.#baseUrl = baseUrl;
  }
  
  async resolve(specifier, referrer) {
    if (specifier.startsWith('./') || specifier.startsWith('../')) {
      return new URL(specifier, referrer || this.#baseUrl).href;
    }
    // 裸模块：从 import map 或 CDN 解析
    return `https://esm.sh/${specifier}`;
  }
  
  async load(url) {
    if (this.#modules.has(url)) return this.#modules.get(url);
    
    const promise = import(/* @vite-ignore */ url);
    this.#modules.set(url, promise);
    return promise;
  }
}

<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@18",
    "react-dom": "https://esm.sh/react-dom@18",
    "lodash/": "https://esm.sh/lodash-es/",
    "#internal/": "./src/internal/"
  }
}
</script>
<script type="module">
  import React from 'react';
  import { debounce } from 'lodash/debounce';
  import { utils } from '#internal/utils.js';
</script>

特性	CommonJS	ESM
加载方式	同步（运行时）	异步（编译时解析）
绑定方式	值拷贝	Live Binding
Tree-Shaking	❌	✅
顶层 await	❌	✅
动态导入	`require(expr)`	`import(expr)`
循环依赖	部分导出	未初始化绑定
this 指向	module.exports	undefined
文件扩展名	.js/.cjs	.js/.mjs