13

Relevant webpack/webpack issue.

Using webpack in real projects slows down, in my experience, after you pile on a certain number of components and/or dependencies. I have a test repository that seeks to demonstrate this with the following application:

  • The entry point is A.js, which requires B.js and C.js.
  • B.js is tiny and doesn't have a lot of dependencies.
  • C.js is monolithic and has thousands of requires.

My expectation is that when using webpack-dev-server in the test project, whenever I save B.js, webpack should recognize that C.js and none of its dependencies have been touched. It should compile B.js swiftly (in <10ms), replace it in the cache, and output the compiled A.js using the cached version of C.js from the initial compile.

However, webpack compiles 3002 hidden modules every time I save B.js, leading to a compile time of 960ms. This isn't bad on its own, but spirals out of control if you add some loaders like react-hot and babel.

I do have a solution: on the same test project there is a dll branch. On that branch, you can run webpack --config webpack.dll.config.js to generate two DLLs from B.js and C.js which will then get leveraged when compiling A.js. Afterwards, when using webpack-dev-server, whenever you save B.js, its DLL will get recompiled, A.js will notice that one of its DLLs has updated and it'll just take the old DLL of C.js and the new DLL of B.js and conjoin them together into one quick happy bundle.

I could go further on that branch and do directory reads or dependency graph walks to generate a DLL for every component, an approach that could potentially be applied to every webpack project. That should in theory make compiling as fast as I would like it. But at that point it seems to me like I will have reimplemented (poorly) what the caching layer in webpack should do on its own, so what's going on here?

Theodor Vararu
  • 401
  • 2
  • 9
  • Try the analyser http://webpack.github.io/analyse/ and checkout this post about long module build chains. http://stackoverflow.com/questions/32923085/how-to-optimize-webpacks-build-time-using-prefetchplugin-analyse-tool – 4m1r Nov 06 '15 at 00:39
  • The analyser doesn't seem to offer hints for optimising incremental compiles. I read that post before posting my own question, but the description of what the plugin does did not look useful given my problem. I've created a `prefetch` branch on my repository where I test to see if adding `new webpack.PrefetchPlugin('./src/C.js')` makes any perceivable difference, but it does not. – Theodor Vararu Nov 07 '15 at 15:54
  • Using the DllPlugin helped me immensely. Dependency tree traversal as you said takes the most time and it doesn't seem to be cached by webpack. I asked about it here: https://github.com/webpack/webpack/issues/2102 – vaughan Feb 27 '16 at 05:38

0 Answers0