Webpack 2 and code splitting

This week I’ve been updating our front end applications to Webpack 2. The upgrade proved to be fairly straightforward and one of the main benefits so far has been the ability to code split, dynamically load JavaScript at runtime and thus build a progressive web app.

I would recommend reading the following article for more information on how to do it:

https://hackernoon.com/straightforward-code-splitting-with-react-and-webpack-4b94c28f6c3f#.ikyl2htnu

The benefits for us are that we will be able to maintain different implementations of sub modules of our front end applications and serve them up based on the tenant who is logged in. These can either be maintained in one code base or pulled in via different npm packages.

This will also enable us to split code out into separate bundles to improve initial load speed.

Gotchas so far

Only one so far, in production if you are serving up your js bundles as gzipped files in your express server like so:


app.get('*.js', function (req, res, next) {
    req.url = req.url + '.gz';
    res.set('Content-Encoding', 'gzip');
    next();
});

Then you will need to exclude doing the above for the js you wish to load dynamically at runtime, since when the front end pulls down the js it won’t be able to handle it in gzip format.

I’ll keep you posted.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s