With Code Splitting we are able to reduce kilobytes sent over the wire and potentially improve page speed. Code Splitting is a such an easy-to-use feature that every single page app should consider to add (if haven’t yet).

So why disable Code Splitting?

Well, of course we shouldn’t!

If you are building server-side rendered apps in React with Code Splitting support baked in, some might use zero-configuration tools like Razzle, which runs two webpack instances, one for the client and the other for the server, and it builds everything for the client and for the server for you.

So let’s just build some app with Code Splitting!

After defining some major split points in your app, you want to build and see how the chunks are doing so far:

And in the file explorer:

But wait?

What is happening here?

Because our app is splitting bundles both on the client and server, multiple bundles are created for the server too, which we don’t really want/need. So we end up having multiple split up [number].server.js. What we want is:

📝 One single server.js.