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')