Ricerca nel sito web

javascript - Misurare le prestazioni della compilazione di Babel (per file o modulo)

Sto cercando di capire come estrarre alcune informazioni dal processo di compilazione di Babel.

Più specificamente, quando eseguo babel (non importa se usando il babel-loader di Webpack, i trasformatori dei framework di test, la CLI di Babel, ecc.) avrei bisogno di estrarre alcune informazioni per ogni file compilato. Tipo:

  • percorso del file
  • tempo impiegato per compilare
  • qualsiasi altro metadato?

Quello che ho provato finora

Plugin di Misurazione della Velocità per Webpack (link)

Funziona bene ma fornisce solo il tempo di esecuzione dei loader di Webpack. Nessuna informazione sui singoli file compilati.

Collegati all'istanza del compilatore/compilazione di Webpack

Ho considerato di scrivere un plugin per Webpack per agganciarmi al processo di compilazione come descritto qui, ma non sono riuscito a trovare gli hook appropriati per riconoscere un file elaborato da babel.

Aggiornamenti

Immagino che @kidroca abbia indicato la direzione giusta. Più specificamente, capisco che l'opzione wrapPluginVisitorMethod di Babel sia la chiave per agganciarsi al processo di compilazione di Babel.

Vedi il plugin di temporizzazione di babel-minify.

Discussioni correlate:

  • \u2028https://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

Aggiornamenti 28/04/18

Alla fine ho provato a incapsulare una soluzione in uno strumento che ho chiamato babel-timing.

Risposta n. 1

Puoi usare @babel/core e babel.transformSync(code) che restituiranno informazioni sull'Albero Sintattico Astratto (AST) insieme ad altri dati. E puoi anche aggiungere della logica per misurare le prestazioni di questo metodo

Ho configurato un repository minimale e ci ho giocato un po' da solo: https://github.com/kidroca/babel-meta

Fondamentalmente puoi eseguire npm run analyze-file ./es6-src/es6-module.js o npm run analyze-dir ./es6-src/es6-module.js e controllare i risultati

Questo restituirà:

{
  "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 */
}

Puoi modificare il file analyze.js per filtrare le informazioni di cui hai bisogno
Puoi modificare il file .babelrc per controllare la trasformazione e aggiungere/rimuovere plugin