Performance of webpack-dev-server with source maps

I’m working on this larg(ish) project where we currently use AMD. It works all right, we don’t build the project in development and load each module individually. It takes about ~2.5 seconds to load the page with ~420 modules/templates.

I’m exploring switching to webpack (which so far looks amazing) for all the benefits that would add. I have our entire existing project building with webpack with no modifications to the project, which is awesome.

It takes 14s to build the project, but if I use webpack-dev-server, the rebuilds are impressively fast ~1s.

However, if I turn on devtool: "source-map", the rebuilds then take ~4s which is slower than loading all modules individually with Require.js where source maps are not needed.
I’ve tried using devtool: "eval" and that’s fast, but it’s not .. a perfect sourcemap (e.g. requires are all numbers now and pathInfo: true doesn’t seem to work for me).

So, my question really is, why does sourcemap slowdown rebuilds so much and how could I try to go around it. E.g. Should I try to make more smaller chunks? Should I try to move some of the shared dependencies from the chunks into the entry bundle? Am I doing something wrong with having so many megabytes of JavaScript?

Here’s my current output just to give you the idea of the size of the project.

Version: webpack 1.0.0-rc3
Time: 14180ms
      Asset     Size  Chunks             Chunk Names
  bundle.js   985492       0  [emitted]  main       
1.bundle.js   437111       1  [emitted]             
2.bundle.js   552099       2  [emitted]             
3.bundle.js  1848882       3  [emitted]             
4.bundle.js  2413145       4  [emitted] 

That’s 5.9MB in total at the moment, even though the unuglified r.js build is 3.8MB. That’s because there’s a lot of code duplication in chunks 1, 2, 3, 4. I’d like to build all modules that are shared at least once into the parent bundle, but haven’t figured how to do that yet.

Author: Fantashit

2 thoughts on “Performance of webpack-dev-server with source maps

  1. The devtool option maps to the SourceMapDevToolPlugin (see here). If you want to apply additional option for the plugin, you need to use the plugin version and omit the devtool options. Using both doesn’t make sense.

    The cheap SourceMaps map to columns: false:

    new webpack.SourceMapDevToolPlugin({
       filename: '[file].map',
       exclude: ['vendors.js'],
       columns: false, // no columns in SourceMaps
       module: false / true // use SourceMaps from loaders 
    })

    I’ll add documentation for the SourceMapDevToolPlugin to the list of plugins.

Comments are closed.