JavaScript模块化与工程化深度解析

1. CommonJS与ES Modules差异

核心区别

主要差异点：

• 加载时机：CommonJS是运行时加载，ESM是编译时静态解析
• 同步性：CommonJS同步加载（适合服务端），ESM支持异步（适合浏览器）
• 导出方式：CommonJS是值拷贝，ESM是实时绑定
• 顶层this：CommonJS指向模块本身，ESM指向undefined

代码示例对比

// CommonJS
// math.js
module.exports = { add: (a, b) => a + b }

// app.js
const math = require('./math')
math.add(2, 3)

// ESM
// math.mjs
export const add = (a, b) => a + b

// app.mjs
import { add } from './math.mjs'
add(2, 3)

实践建议：

1. 新项目优先使用ES Modules
2. Node.js项目可通过.mjs扩展名或package.json中设置"type": "module"启用ESM
3. 混合使用时注意循环引用处理差异

2. 动态导入（Dynamic Import）

核心特性

// 基本用法
import('./module.js')
  .then(module => {
    module.doSomething()
  })
  .catch(err => {
    console.error('加载失败', err)
  })

// async/await写法
async function loadModule() {
  try {
    const module = await import('./module.js')
    module.init()
  } catch (err) {
    console.error(err)
  }
}

关键优势：

• 按需加载减少初始包体积
• 失败隔离不影响主流程
• 与代码分割(Code Splitting)完美配合

性能优化示例：

// 路由级动态导入（React示例）
const Home = React.lazy(() => import('./views/Home'))
const About = React.lazy(() => import('./views/About'))

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Router>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </Suspense>
  )
}

实践建议：

1. 对非关键路径功能使用动态导入

2. 配合Webpack的魔法注释定制chunk名称：

   import(/* webpackChunkName: "lodash" */ 'lodash')

3. 添加适当的加载状态和错误处理

3. Tree Shaking原理

工作机制

实现条件：

1. 必须使用ES Modules（import/export）
2. 模块需标记为sideEffects: false
3. 构建工具支持（Webpack/Rollup）

Webpack配置示例：

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    minimize: true,
    sideEffects: true
  }
}

// package.json
{
  "sideEffects": ["*.css", "*.global.js"]
}

实践建议：

1. 避免在模块顶层产生副作用
2. 第三方库选择ESM版本（如lodash-es）
3. 使用/*#__PURE__*/标注无副作用函数调用
4. 定期分析bundle（webpack-bundle-analyzer）

4. 模块加载器（SystemJS）

核心能力

// 配置示例
SystemJS.config({
  map: {
    'lodash': 'https://unpkg.com/lodash@4.17.15/lodash.js'
  },
  packages: {
    '/app': {
      defaultExtension: 'js'
    }
  }
})

// 动态加载
SystemJS.import('/app/main.js')
  .then(module => {
    module.startApp()
  })

典型应用场景：

• 微前端架构中的跨应用模块共享
• 动态加载非打包的第三方库
• 开发环境下的CDN模块调试

与原生ESM对比：

实践建议：

1. 现代应用优先使用原生ESM
2. 遗留系统迁移可考虑SystemJS作为过渡方案
3. 微前端场景下合理配置共享依赖

5. 包管理（npm/yarn/pnpm）

核心对比

功能对比：

pnpm优势原理：

node_modules
└── .pnpm
    ├── lodash@4.17.21
    │   └── node_modules
    │       └── lodash
    └── react@18.2.0
        └── node_modules
            └── react

实践建议：

1. 新项目推荐pnpm（尤其Monorepo场景）
2. 迁移现有项目可考虑yarn（兼容性好）

3. 关键项目启用CI依赖校验：

   pnpm install --frozen-lockfile

4. 定期执行依赖审计：

   npm audit
   yarn audit
   pnpm audit

总结趋势

1. ES Modules成为标准：浏览器和Node.js原生支持度持续提升
2. 构建工具融合：Vite等基于ESM的新工具兴起
3. 包管理革新：pnpm的硬链接方案显著优化磁盘空间
4. 微前端驱动：模块加载方案更加多样化

升级路径建议：

Legacy → Modern
CommonJS → ES Modules
npm/yarn → pnpm
Webpack → Vite/Rollup
全局状态 → 模块联邦