Wat is Javascript Code Splitting

About

Code splitting is an operation performed by a bundler that splits code into chunks.

You can then load only what is needed for a page to render.

It's also known as route-chunking (where route refers to http route, ie a route is equivalent to a page)

Why

Lazy loading

In large web applications, it is often desirable to split up the app code into multiple JS bundles that can be loaded on-demand (ie lazy loaded).

This function is also called:

  • lazy loading
  • dynamic loading

It helps to increase the performance of your application by reducing the size of the initial JS payload that must be fetched.

Multiple Entry points

If you want to create multiple entry points that are targeted to different users.

How to

Pure Javascript

The best way to introduce code-splitting is to use the dynamic import() syntax as most bundlers will detect this statement.

Example:

import("./module-to-lazy-load").then(export => {
  // computation
});

It's supported by webpack 1) (and therefore by all derived applications such as NextJs

React

See React Lazy

Documentation / Reference





Discover More
Javascript Module - Dependency Graph

This page is the dependency graph between module. The dependency graph is build from a single module (called the entry point) for a ESM module with the import statement for a commonJs module (node...
Progressive Web Application (PWA)

A is a regular website that take advantage of modern browser functionality to augment the web experience progressively until you get a native look and feel application. Its name comes from the context...
React - Lazy

The lazy function implements lazy loading. (ie it will let you defer loading component’s code until it is rendered/executed for the first time) It's part of code splitting meaning that the build step...
Web - Build Operations / Build Pipeline

This page is the build operation for the web. A build pipeline will: transform (compile) bundle and optimize web code html, css (less, ...) Javascript (Javascript Module, React Jsx,...
Web - Bundler

A bundler is a web build tool that from a javascript entry file get all dependent files performs the build operations configured. and outputs only one file: the bundle A math module The...
Web Node Build - Task runner orchestrator

A Task runner (orchestrator) is a build tool that permits to run all kind of task (generally build operations) in serie or parallel. A task runner works on a stream of file selected from the file system...
Browser
What is Lazy Loading or loading on demand?

A Lazy loading method will fetch the resource (image, javascript module, advertisements) in the web browser window when needed. When needed means for media such as image: when they will become visible...



Share this page:
Follow us:
Task Runner