3 killer optimization for large scale javascript app bundles build by Webpack 2.x

Just want to mention first, I really like Webpack logo :)


Clean your bundles with 'tree shaking'

Javascript minification is not enough for todays front end tooling. When it comes to large scale application performance is the most important point you should care about. Simple definition of 'tree shaking' is it removes the functions from your bundles that you don't use.

tree shaking 1 Let's imagine you have a module like above. In different places you use function2 but never used function1 from utility.js module.
So you'll want to ignore function1 at your bundles because you don't use it. Webpack can handle it!

tree shaking 2

In your .babelrc file just use the {"modules":false} and you are done. Check your modules and module sizes after it.

See the Webpack example

Separate your app bundle and vendor files

Once your application gets bigger you'll want to separate your application files from main bundle. Because when you make changes on your application files it still tries to bundle static vendor files. Also this separation gives you ability to cache static vendor files. Of course it should be refresh when you add new dependencies into it. But still it'll be a big improvement of living app.

bundling vendor files

Let's imagine you have 2 different react app(App1 and App2). They both need 'React'. So our vendor bundle will have React source code. As you see from above, CommonsChunkPlugin inside of webpack handles this.

bundling vendor files 2

That's it! Your vendor file now have 'React' for both application. You can multiply the vendors by adding them inside to entry vendors array at webpack config file.

Use chunkhashes for cachy vendor bundles

When it comes to production from development, you also need to version your vendor files. So your users won't download them everytime they use your app.

There is some other ways to do that but I love chunkhash method.

All you need to do is just add [chunkhash] to your output filename.


And here is the result.

Bonus : Webpack manifest

You may need your build paths for pushing from server. In this point I use webpack-manifest-plugin to do that.

It generates a manifest.json for your builds.

See github repo if you need source

Thanks for reading.