How to improve webpack / babel build performance without using the watch feature?

Question

I'm working on a SBT/Scala web project and I wanted to take advantage of the ES6 features and the new module syntax for the frontend JavaScript layer. SBT has its own build system and I managed to tweak an existing sbt plugin to run webpack to build my JS files using babel. The current solution is a little messy but it works and lives within the sbt build system.

The problem is that it's slow. For every change a new instance of webpack is created and it compiles everything completely from the scratch.

I know I could jump out of the sbt build system and just for the development phase use webpack separately to watch and rebuild my files. But before I do that I was wondering if there are some ways to speed up the webpack build process.

I checked the documentation and it seems to me that any available caching is handled only in memory and that is inapplicable to my case. Or is there some kind of file cache that would survive between separate runs of webpack build? For instance, all of my npm dependencies won't change most of the time so they could be compiled once, cached and then simply included...

Answer 1

Some configuration to consider:

• module.rules include - You should set include to point at your source. By default it will traverse everything (node_modules in particular is slow). Make sure you have it set
• resolve.unsafeCache
• module.noParse
• Enable babel-loader caching - loader: 'babel?cacheDirectory'.
• aliasing already built, minified libraries
• future - cache - This might work one day. Sadly there's no nice way to serialize the cache data yet.