How to disable Code Splitting in webpack

Glenn Reyes
Oct 21, 2017 · 3 min read

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.

Let’s fix it!

One way would be to create another build step to delete all [number].server.js, but that would be the last (or not an) option.

A better way would be to tweak the webpack config to disable Code Splitting for the server. Doing some research I came across this gist by @jcenturion86 and learned about LimitChunkCountPlugin that allows me to set a limit ofhow many chunks should be created. So the config looks like this:

With this, one single chunk/bundle will be created and voila: Code Splitting is disabled.

So in Razzle, we want to set it only for the server by doing this in the razzle.config.js:

Some people encountered type or runtime errors with this approach. So alternatively, we could add these two babel plugins: babel-plugin-dynamic-import-node to transpile import() to a deferred require() and then remove webpack features with babel-plugin-remove-webpack:

Both solutions solve the same issue:

✅ One single server.js

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store