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).
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.