Tech Talk Recap: How to Improve Webpack Performance in Large Projects

Food, beer, and many great webpack tips!

On Thursday, August 10th, Redfin hosted a tech talk titled How to Improve Webpack Performance in Large Projects at our San Francisco office. The talk provided a few concrete suggestions for improving webpack build performance that we’ve used at Redfin, and as a bonus we got a few suggestions from the group afterward!

For those in a hurry, the tl;dr follows. Otherwise, we’ve posted slides + audio of the talk. Q&A starts ~40:00. Some of juiciest performance suggestions from the Q&A are included in the tl;dr below.

From the talk:

Consider providing a way to easily disable sourcemaps for dev builds. Disabling sourcemaps saves us ~25% (~30s) off our longest webpack build. The trade-off is slightly more challenging debugging, sometimes.

Disabling sourcemaps saves us ~25% (~30s) off our longest webpack build. The trade-off is slightly more challenging debugging, sometimes. Parallelize UglifyJS. Use whatever means necessary. The 1.x beta plugins provide both caching of previously-uglified files, and also the ability to farm out uglify to a worker farm.

Use whatever means necessary. The 1.x beta plugins provide both caching of previously-uglified files, and also the ability to farm out uglify to a worker farm. babel-loader: Don’t forget to exclude node_modules from the loader!

For large projects, definitely consider using the cacheDirectory option to cache loader output to the filesystem between runs.

Don’t forget to exclude from the loader! For large projects, definitely consider using the cacheDirectory option to cache loader output to the filesystem between runs. Parallelize building multiple webpack configs. parallel-webpack is designed for this, and is pretty close to a drop-in replacement for webpack itself.

parallel-webpack is designed for this, and is pretty close to a drop-in replacement for webpack itself. HappyPack …is the bee’s knees. Farm out your heavy loader workloads to a worker farm. You won’t regret it.

From the audience:

Webpack DLLPlugin can provide big benefits. We (I) tried this at Redfin before and apparently stopped digging too early. Definitely going to take another look.

We (I) tried this at Redfin before and apparently stopped digging too early. Definitely going to take another look. hard-source-webpack-plugin . I hadn’t heard of this one before. Caches intermediate work to disk somehow. Sounds really promising.

I hadn’t heard of this one before. Caches intermediate work to disk somehow. Sounds really promising. webpack-dev-middleware for lazy watch. We built a homegrown “lazy watch” framework around webpack watch mode that’s pretty tightly coupled with what we do with React Server. We got a tip after the talk that webpack-dev-middleware might make a lazy watch implementation straightforward for other users.

Have other webpack performance tips you’d like to share?

Let us know in the comments!