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

Question

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

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

• 文件路径
• 编译时间
• 还有其他元数据吗？

到目前为止我尝试过的

Webpack的速度测量插件（链接）

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

接触Webpack的编译器/编译实例

我考虑过编写一个Webpack插件以按此处所述插入编译过程，但是我找不到合适的钩子来识别正在处理的文件babel。

更新

我猜@kidroca指出了正确的方向。更具体地说，我了解Babel的wrapPluginVisitorMethod选择是进入Babel编译过程的关键。

见babel-minify的定时插件。

相关主题：

• ？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/coreandbabel.transformSync(code)将返回 抽象语法树(AST) 信息以及一些其他数据。并且你也可以添加一些逻辑来衡量这个方法的性能

我已经设置了一个最小的 repo 并自己玩了一下：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文件以控制转换和添加/删除插件