wrap modules in performance.mark to track initialization performance
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
index.js
package.json

README.md

performance-loader

Wraps modules in the browser performance API.

Installation

npm install performance-loader --save-dev

Usage

Documentation: Using loaders

Example config

module.exports = {
  module: {
    postLoaders: [
      { loader: "performance-loader" },
    ]
  }
};

In browser

After initializing the page in a browser try:

console.table(
    window.performance.getEntriesByType('measure')
        .filter(p => p.duration > 1) // only modules that took longer than 1ms
        .sort((a, b) => b.duration - a.duration) // sort by descending duration
        .map(p => [p.name, p.duration]) // map for the table
)
// table of modules that took longer than 1ms to run

How it works

It wraps your modules in performance.mark and then calls performance.measure.

window.performance.mark('/path/to/module.js--start')
/*** module.js code here ***/
window.performance.mark('/path/to/module.js--end')
window.performance.measure('/path/to/module.js', '/path/to/module.js--start', '/path/to/module.js--end')