测量Babel编译性能（每个文件或模块）

Question

我正在试图弄清楚如何从babel编译过程中提取一些信息。

更具体地说，当我运行babel（无论是否使用Webpack的babel-loader，测试框架'transformers，Babel's CLI等）时，我需要为每个编译文件提取一些信息。喜欢：

• 文件路径
• 编译时间
• 任何其他元数据？

到目前为止我尝试过的

Speed Measure Plugin for Webpack (link)

工作正常，但它只提供Webpack的加载器运行时间。没有关于单个编译文件的信息。

Hook into Webpack's compiler/compilation instance

我认为writing a Webpack plugin会像here所描述的那样挂钩编译过程，但我找不到合适的钩子来识别babel正在处理的文件。

更新

我猜@kidroca指出了正确的方向。更具体地说，我理解Babel的wrapPluginVisitorMethod option是钩住Babel编译过程的关键。

见babel-minify的timing plugin。

相关主题：

• https://github.com/babel/babel/issues/5340
• https://github.com/babel/babel/issues/2206
• https://github.com/babel/babel/pull/3659
• https://github.com/babel/minify/pull/93
• https://github.com/babel/babel/pull/3659

更新28/04/18

我最终试图将解决方案包装到一个名为babel-timing的工具中。

Answer 1

您可以使用@babel/core和babel.transformSync(code)，它将返回Abstract Syntax Tree（AST）信息以及其他一些数据。您还可以添加一些逻辑来衡量此方法的性能

我已经设置了一个最小的回购并且自己玩了一点：https://github.com/kidroca/babel-meta

基本上你可以运行npm run analyze-file ./es6-src/es6-module.js或npm run analyze-dir ./es6-src/es6-module.js并检查结果

这将返回：

{
  "filename": "/full/path/to/src/file.js",
  "cwd": "current/dir",
  "ast": "ast information json - lines, comments, and other info",
  "executionTime": "execution time in ms",
  /* a lot of other info */
}

您可以修改analyze.js文件以过滤掉您需要的信息 您可以修改.babelrc文件以控制转换并添加/删除插件