#Babel 性能优化

#1. 面试题

Q: 如果 Babel 编译太慢，有哪些手段可以优化构建速度？

#2. 核心解答

Babel 的 AST 转换 是最耗 CPU 的过程。当项目大时，必须采取优化手段。

#(1) Webpack loader 配置 (核心)

• 缩小范围 (Narrow Scope): 在 babel-loader 的规则中，必须配置 exclude: /node_modules/。 这一步至关重要，因为 node_modules 里的第三方库绝大多数已经编译过了 (CommonJS/ESM)。如果还要对它们做一次 AST 解析和转换，是巨大的浪费。

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 千万别忘了
        use: 'babel-loader'
      }
    ]
  }

• 利用缓存: 开启 cacheDirectory: true。 Babel 会将编译结果缓存到 node_modules/.cache/babel-loader 目录。 第二次启动时，如果文件没变，直接读取缓存，速度提升 2倍以上。

#(2) 并行构建

• thread-loader / Happypack: 如果构建仍然很慢，可以把 babel-loader 放到子进程 (Worker Pool) 中运行，利用多核 CPU 加速转换过程。

#(3) 减少不必要的 Preset/Plugin

• 不要引入用不到的 preset (如 preset-react 在非 react 项目)。
• 如果在开发环境不需要兼容 IE11，可以在 preset-env 中把 targets 设置为 chrome: 'latest'，这样 Babel 就不用转换大量语法，速度极快。

#3. 面试加分项

#Q: preset-env 的 debug 模式？

你可以开启 debug: true 选项。 presets: [['@babel/preset-env', { debug: true }]]。 这时 Babel 会在控制台打印它可以支持的目标浏览器，以及到底引入了哪些插件和 polyfill。这对于排查性能瓶颈和冗余代码非常有帮助。

#4. 总结

• Exclude node_modules: Avoid unnecessary work.
• CacheDirectory: Reuse result.
• Parallel: thread-loader.
• Dev Target: Modern browser (Chrome latest) for speed.