Fundamentals of Cross-Platform Development (III)

Most of the time, we already know at build time what code has to be included in the client bundle and what shouldn’t be included. This means that we can take this decision upfront and instruct the bundler to replace the implementation of an entire module at build time. This often results in a leaner bundle because we’re excluding unnecessary modules, and produces a more readable code because we don’t have all the if...else statements required by runtime and build-time branching.

Let’s find out how to adopt module swapping with webpack by updating our example.

The main idea of mudule swapping is that we want to have two separate implementations of our sayHello functionality: one optimized for the server (say-hello.js) and one optimized for the browser (say-hello-browser.js). We’ll then tell webpack to replace any import of say-hello.js with the say-hello-browser.js module. Let’s see what our new implementation looks like now.