如何在Node.js与浏览器中实现ES6模块的通用导入与并行化

在前后端一体化的开发趋势下，使用同一份ES6模块代码同时运行在Node.js和服务端渲染或纯浏览器环境中，已经成为常见需求。与此同时，通过并行化加载多个独立模块，可以显著缩短初始化耗时。下面我们具体说明实现方式。

一、编写通用的ES6模块代码

通用模块应避免使用仅某一方存在的全局对象，例如浏览器中的window或Node.js中的process。可以通过特性判断来兼容：

// mathUtil.mjs
export function add(a, b) {
  return a + b;
}

export function isNode() {
  // 判断是否为Node.js环境
  return typeof process !== 'undefined' && process.versions != null;
}

在Node.js中，需将文件后缀设为.mjs或在package.json中设置"type": "module"。在浏览器中，则通过<script type="module">引入。

二、在Node.js中实现导入与并行化

Node.js支持静态导入与动态导入。动态导入返回Promise，适合并行加载：

// main.mjs
async function loadModules() {
  // 并行导入多个模块
  const [mod1, mod2] = await Promise.all([
    import('./mathUtil.mjs'),
    import('./stringUtil.mjs')
  ]);
  console.log(mod1.add(1, 2));
  console.log(mod2.capitalize('hello'));
}

loadModules();

三、在浏览器中实现导入与并行化

浏览器原生支持ES6模块，使用import()也可并行获取：

<script type="module">
  async function init() {
    const [m1, m2] = await Promise.all([
      import('./mathUtil.mjs'),
      import('./domUtil.mjs')
    ]);
    console.log(m1.add(3, 4));
    m2.bindEvents();
  }
  init();
</script>

四、常见注意事项

• 路径必须使用相对路径或URL，浏览器不支持裸模块名直接导入，除非借助打包工具。
• Node.js的require与import不可混用在同一文件。
• 并行化仅对无依赖关系的模块有意义，存在依赖时应按顺序导入。

小结

通过上述方式，我们可以让ES6模块在Node.js与浏览器中复用，并利用Promise.all配合动态import()完成并行化加载，从而提升应用启动性能。

ES6_moduleNode_jsbrowser修改时间：2026-07-28 04:54:16