Babel 性能优化

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

1. 面试题

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

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

缩小范围 (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倍以上。

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

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

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

ON THIS PAGE