Code Splitting in JavaScript

Loading large JavaScript resources impacts page speed significantly. Splitting your JavaScript into smaller chunks and only downloading what is necessary for a page to function during startup can greatly improve your page’s load responsiveness, which in turn can improve your page’s Interaction to Next Paint.

As a page downloads, parses, and compiles large JavaScript files, it can become unresponsive for periods of time. The page elements are visible, as they are a part of a page’s initial HTML and styled by CSS. However, because the JavaScript required to power those interactive elements-as well as other scripts loaded by the page-may be parsing and executing the JavaScript for them to function. The result is that the user may feel as though the interaction was significantly delayed, or even altogether broken.

This often happens because the main thread is blocked, as JavaScript is parsed and compiled on the main thread. If this process takes too long, interactive page elements may not respond quickly enough to user input. One remedy for this is to load only the JavaScript you need for the page to function, while deferring other JavaScript to load later on through a technique known as code splitting.

There are two Techniques for code splitting:

• Webpack
• Dynamic Import

Webpack

Webpack is a module bundler for JavaScript applications. It takes all the files (JavaScript, CSS, images, fonts, etc.), understands how they are connected (vis imports), and bundles them into a few optimized files that can be sent to the browser.

It is mainly used in JavaScript Frameworks:

• Frameworks like React, Vue and Angular use modern JavaScript features like:
  • JSX
  • ES6 modules
  • Async/await
  • Decorators
• These features are not fully supported by all browsers, so the code needs to be transpiled and bundled into something browser can understand.
• Webpack helps with this by:
  • Converting modern JS to compatible JS (via Babel)
  • Bundling many files into optimized chunks.
• Frameworks often come with Webpack already built-in, so developers don’t need to configure it manually.

Dynamic Import

A dynamic import allows you to load a JavaScript module only when need it, instead of at the beginning when the page loads.

It uses the import() function, which returns a Promise, and can be used anywhere in your code.

In this snippet math.js file is imported inside the function only when the event is happened the function is called and import the math.js file and calculate the value.

By using the dynamic import code splitting is implement in JavaScript. In this first I create html file in that I created two buttons each button is one category. When user click one button only that particular category is fetched and display in UI.

Second, I created the two separate JavaScript function for two category one is technology and another one is sports.

Third, In html page by using script tag write a function for two category. In that when user click one category only that particular category js file is imported and call that function. At first it will load only the html file when click the one category that category is loaded and call the function.

In this snippet sports is clicked so that sport.js function is fetched and displayed in UI.