Web Development Tools

Webpack (v4) Code Splitting using SplitChunksPlugin

Introduction to code splitting in Webpack v4 and with `import()` function → lazy loading routes in React using React Router v4

Webpack 4 comes with a lot of changes and improvisations. One of them is SplitChunksPlugin, which helps webpack break a JavaScript bundle into different chunks. Webpack uses this plugin internally and we can enable/configure it inside optimization block of webpack.config.js.

If you need a basic introduction to Webpack, you can follow my article here on “How to create JavaScript plugin using Webpack”. In nutshell, Webpack with the help of loaders is used to transform ES2015+ syntax (or other languages like TypeScript) into cross-browser ES5 syntax. Not only that, we can create a single JavaScript file (called as a bundle) from different files we might have separated for better code management. But loading a single bundle might be painful to load over the network at once and we might not need all the code at once. Hence it’s better to break down the main bundle into few chunks (files) and lazy load (using Ajax request) some chunks only when we need it.

In this article, we will explore SplitChunksPlugin, how to separate code into different…