Before start about code splitting we should know more about "Bundling". There are many tools used for Bundling and code splitting. But here I am going to write the concept with Webpack

Bundling process

When web development moved towards npm based projects, the concept of "build" is more significant. Mostly this process involves code compatibility conversion, bundling of files, code minification etc.

Here bundling is a complex process which involves merging of multiple imported files into a single file. And most probably this bundles file can handle an entire page app as well.

Webpack is one of the most widely used package for bundling process.

Here is a quick overview of Webpack help us to bundle the assets.

webpack_code_splitting

As shown, the bundling process will combine all similar assets into a single one.

  • All JS files into a single file
  • All CSS files will be merged into one css

Like other assets also merge and consolidated into a single file.

For a smaller web application or page, this process is very useful but imagine about a complex web application !!!

Single bundle issues

Bundling process is great until the web app having a reasonable size. As the size and complexity of the application increases, the size of the bundle file also increases. The real issue starts when the web app shipped with a large number of third-party applications and application will end up with large size bundle file. This will lead to huge performance issues.

Split the bundle - Code Splitting

In order to avoid the bundle becomes so "fat", plan your app in advance. Start split your bundle code. In short "code splitting" is a feature is supported by most of the bundlers (Like Webpack); which can create multiple bundles and it's load on application runtime.

In another word, bundlers prepare the bundles specifically for the instances and they will load the bundles in the background whenever it is required.

-Image Courtesy Webpack-