speed-measure-webpack-plugin

What is speed-measure-webpack-plugin?

The speed-measure-webpack-plugin (SMP) is a tool designed to measure the build speed of your webpack configuration. It helps developers identify bottlenecks in their build process by providing detailed timing information for each plugin and loader used in the webpack configuration.

What are speed-measure-webpack-plugin's main functionalities?

Measure Build Speed

This feature allows you to wrap your existing webpack configuration with SMP to measure the build speed. The `wrap` method is used to wrap the configuration, and SMP will then provide detailed timing information for each part of the build process.

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // Your webpack configuration
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    // Your plugins
  ]
});

Detailed Timing Information

This feature allows you to customize the output format and target for the timing information. In this example, the `outputFormat` is set to 'human' for a more readable format, and the `outputTarget` is set to `console.log` to print the timing information to the console.

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin({
  outputFormat: 'human',
  outputTarget: console.log
});

module.exports = smp.wrap({
  // Your webpack configuration
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    // Your plugins
  ]
});

Other packages similar to speed-measure-webpack-plugin

webpack-bundle-analyzer

The webpack-bundle-analyzer plugin provides a visual representation of the size of webpack output files. It helps developers understand the size of their bundles and identify large dependencies. Unlike SMP, which focuses on build speed, webpack-bundle-analyzer focuses on bundle size and composition.

webpack-dashboard

The webpack-dashboard plugin provides a terminal-based dashboard for webpack builds. It displays build progress, errors, and warnings in a more user-friendly way. While SMP focuses on measuring build speed, webpack-dashboard aims to improve the overall developer experience by providing real-time feedback during the build process.

README

Speed Measure Webpack Plugin

(this plugin is not yet stable, and not safe for production)

(so far tested only with webpack@3.10.0, node@8.9.4)

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

----------------------------
General output time took 1.01 minutes

IgnorePlugin took 0.62 seconds
ForceCaseSensitivityPlugin took 20.27 seconds
SpriteLoaderPlugin took 30 milliseconds
ExtractTextPlugin took 9.44 seconds
DefinePlugin took 1 milliseconds

thread-loader, and
babel-loader took 0.56 minutes
    Med   = 401 milliseconds,
    x̄     = 1.08 seconds,
    σ     = 0.57 seconds,
    range = (268 milliseconds, 2.49 seconds),
    n     = 247
file-loader took 7.11 seconds
    Med   = 1.41 seconds,
    x̄     = 1.26 seconds,
    σ     = 436 milliseconds,
    range = (340 milliseconds, 2.02 seconds),
    n     = 29
----------------------------

Getting Started

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

Change your webpack config from

{
  entry: {...},
  output: {...},
  module: {...},
  plugins: [
    new MyPlugin(),
    new MyOtherPlugin()
  ]
}

to

{
  entry: {...},
  output: {...},
  module: {...},
  plugins: SpeedMeasurePlugin.wrapPlugins({
    MyPlugin: new MyPlugin(),
    MyOtherPlugin: new MyOtherPlugin()
  })
}

Or you can also specify config:

{
  entry: {...},
  output: {...},
  module: {...},
  plugins: SpeedMeasurePlugin.wrapPlugins({
    MyPlugin: new MyPlugin(),
    MyOtherPlugin: new MyOtherPlugin()
  }, {
    outputFormat: "human",
    outputTarget: "myFile.txt"
  })
}

outputFormat

(default "json")

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

outputTarget

(default null)

• null - prints to console.log
• "foo" - prints (and makes, if no file exists) to the file at location "foo"