Harnessing the power of Webpack

We are overwhelmed by the response on our previous blog about Housing Go and today we are sharing our bundling and chunking strategies using webpack.

Housing Go + Webpack

TL; DR;

  1. Use code splitting and create multiple entry points.
  2. Extract common chunks from entry-points mentioned in 1.
  3. Use `recordsPath` option for long-term caching.

1. Use code splitting and create multiple entry points

Code splitting

For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”.
To clarify a common misunderstanding: Code Splitting is not just about extracting common code into a shared chunk. The more notable feature is that Code Splitting can be used to split code into an on demand loaded chunk. This can keep the initial download small and downloads code on demand when requested by the application.
Source: https://webpack.github.io/docs/code-splitting.html
Define a CommonJS split point

Multiple entry points

If you need multiple bundles for multiple HTML pages you can use the “multiple entry points” feature. It will build multiple bundles at once. Additional chunks can be shared between these entry chunks and modules are only built once.
Source: https://webpack.github.io/docs/multiple-entry-points.html
Define multiple entry points

2. Extract common chunks from entry-points

A common challenge with combining [chunkhash] and Code Splitting is that the entry chunk includes the webpack runtime and with it the chunkhash mappings. This means it’s always updated and the [chunkhash] is pretty useless, because this chunk won’t be cached.
A very simple solution to this problem is to create another chunk which contains only the webpack runtime (including chunkhash map). This can be archieved by the CommonsChunkPlugin (or if the CommonsChunkPlugin is already used by passing multiple names to the CommonChunkPlugin). To avoid the additional request for another chunk, this pretty small chunk can be inlined into the HTML page.
Source: https://github.com/webpack/webpack/tree/master/examples/chunkhash
CommonsChunkPlugin configuration

For more understanding read our webpack configuration explanation CommonsChunksPlugin techniques by Sean T. Larkin



For Housing Go’s webpack configuration — read here

Must read:


Future work

We will be trying out some exciting things with webpack 2.0 and will post our learnings here soon.

If you want to read the full story about our journey to Progressive Web Application, checkout this blog post.