Read more

Debugging your Webpack build time with Speed Measure Plugin

Arne Hartherz
April 23, 2021Software engineer at makandra GmbH

If your Webpack build is slow, you can use the Speed Measure Plugin for Webpack Show archive.org snapshot to figure out where time is being spent.
Note that at time of writing, Webpack 5 seems unsupported Show archive.org snapshot . It works on Webpack 4, though.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

Wire it into your application as described in the library's documentation:

  1. Hook into your environment file, e.g. config/webpack/development.js and instead of exporting your Webpack config, first load the plugin and wrap your config to export:

    const smp = new SpeedMeasurePlugin()
    const config = environment.toWebpackConfig()
    
    module.exports = smp.wrap(config)
    
  2. Restart your webpack dev server, or explicitly compile your assets.

  3. Check your terminal for extra output like this:

    SMP example output

  4. When using the dev server, make changes and inspect the recompile response. SMP metrics will be included upon every compile, so you can see which modules or files your recompile hit.

To dig further, you may add options to the new SpeedMeasurePlugin call. Example:

const smp = new SpeedMeasurePlugin({ outputFormat: "humanVerbose", loaderTopFiles: 20 })
const config = environment.toWebpackConfig()

module.exports = smp.wrap(config)

You should now have an idea where optimization might be feasible. Look around for suggestions, e.g. the sass-loader readme Show archive.org snapshot when you want to optimize Sass build time.

Posted by Arne Hartherz to makandra dev (2021-04-23 16:24)