Измерение производительности компиляции Babel (для каждого файла или модуля)

#javascript #webpack #babeljs #babel-loader

#javascript #webpack #babeljs #babel-загрузчик

Вопрос:

Я пытаюсь выяснить, как извлечь некоторую информацию из babel процесса компиляции.

Более конкретно, когда я запускаю babel (независимо от того, использую ли я Webpack babel-loader , transformers от Test Framework, Babel CLI и т.д.) Мне нужно было бы извлечь некоторую информацию для каждого скомпилированного файла. Нравится:

  • путь к файлу
  • время, затраченное на компиляцию
  • какие-либо другие метаданные?

Что я пробовал до сих пор

Плагин для измерения скорости для Webpack (ссылка)

Работает нормально, но обеспечивает время работы только загрузчиков Webpack. Нет информации об отдельных скомпилированных файлах.

Подключение к экземпляру компилятора / compilation Webpack

Я рассматривал возможность написания плагина Webpack для подключения к процессу компиляции, как описано здесь, но я не смог найти подходящих подключений для распознавания файла, обрабатываемого babel .

Обновления

Я думаю, @kidroca указал правильное направление. Более конкретно, я понимаю, что wrapPluginVisitorMethod опция Babel является ключом для подключения к процессу компиляции Babel.

Смотрите babel-minify плагин синхронизации.

Связанные темы:

Обновления 28/04/18

В конце концов я попытался обернуть решение в инструмент, который я назвал babel-timing.

Комментарии:

1. Просто идея, вместо создания другого плагина, просто перехватите babel-loader.

2. ^ зачем останавливаться на загрузчике, перехватывайте babel.transform . По возможности перенесите свою логику измерения прямо в исходный код babel.

3. Я определенно хотел бы найти решение, включающее только babel, чтобы иметь возможность измерять время компиляции независимо от окружающего инструментария.

4. babel-minify кажется, что для использования внутри babel лучше всего использовать плагин-тайминг и бенчмарк. Я не уверен, wrapPluginVisitorMethod можно ли передать из внешней конфигурации, например. babelrc. Если это возможно, это позволит вам интегрировать этот тест / анализ без внесения изменений в код babel и запустить его для любого проекта, использующего babel

Ответ №1:

Вы можете использовать @babel/core и babel.transformSync(code) , которые будут возвращать информацию об абстрактном синтаксическом дереве (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 файл, чтобы управлять преобразованием и добавлять / удалять плагины