Posted about 1 month ago. Visible to the public.

Debugging your Webpack build time with Speed Measure Plugin

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

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:

    Copy
    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:

Copy
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 when you want to optimize Sass build time.

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Arne Hartherz
Last edit:
about 1 month ago
by Arne Hartherz
Attachments:
smp.png
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more