speed-measure-webpack-plugin

Speed Measure Plugin

^{(for webpack)}

The first step to optimising your webpack build speed, is to know where to focus your attention.

This plugin measures your webpack build speed, giving an output like this:

Install

npm install --save speed-measure-webpack-plugin

or

yarn add speed-measure-webpack-plugin

Usage

Change your webpack config from

const webpackConfig = {
  plugins: [
    new MyPlugin(),
    new MyOtherPlugin()
  ]
}

to

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const webpackConfig = {
  plugins: SpeedMeasurePlugin.wrapPlugins({
    MyPlugin: new MyPlugin(),
    MyOtherPlugin: new MyOtherPlugin()
  })
}

If you're using webpack-merge, then you can do:

const smp = new SpeedMeasurePlugin();

const baseConfig = {
  plugins: smp.wrapPlugins({
    MyPlugin: new MyPlugin()
  }).concat(smp)
  // ^ note the `.concat(smp)`
};

const envSpecificConfig = {
  plugins: smp.wrapPlugins({
    MyOtherPlugin: new MyOtherPlugin()
  })
  // ^ note no `.concat(smp)`
}

const finalWebpackConfig = webpackMerge([
  baseConfig,
  envSpecificConfig
]);

Options

Options are passed in to the constructor

const smp = new SpeedMeasurePlugin(options);

or as the second argument to the static wrapPlugins

SpeedMeasurePlugin.wrapPlugins(pluginMap, options);

options.outputFormat

Type: String
Default: "human"

Determines in what format this plugin prints its measurements

• "json" - produces a JSON blob
• "human" - produces a human readable output

options.outputTarget

Type: String
Default: undefined

Specifies the path to a file to output to. If undefined, then output will print to console.log

options.disable

Type: Boolean
Default: false

If truthy, this plugin does nothing at all. It is recommended to set this with something similar to { disable: !process.env.MEASURE } to allow opt-in measurements with a MEASURE=true npm run build