时间戳

首页 > 解决方案 > 测量 Babel 编译性能（每个文件或模块）

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

问题描述

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

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

到目前为止我尝试过的

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

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

挂钩到 Webpack 的编译器/编译实例

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

更新

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

见babel-minify的计时 插件.

相关话题：

28/04/18 更新

我最终尝试将解决方案封装到我称为babel-timing的工具中。

标签： javascriptwebpackbabeljsbabel-loader

解决方案

您可以使用@babel/coreand babel.transformSync(code)which 将返回 抽象语法树(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文件以控制转换和添加/删除插件

推荐阅读