In NE Digital, we are continuously working to provide faster and smoother user experience irrespective of the internet connection

or the device type. In order to achieve that shipping less amount of javascript payload is one of our key focus areas.

Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways. Addy Osmani

We are using WebPageTest to do our performance benchmark on the homepage. With device type as MotoG4 and connection type as 3GFast, we observed the following results.

From the above image, we can observe that around 76.4% of processing time is consumed by scripting, and among that around 35.5% of the time is taken by Evaluatescript alone.

If we can reduce the amount of js we ship, then those smaller scripts can be downloaded faster and it will reduce CPU execution time. As a result, the main thread will be able to respond to user interaction much earlier providing a much better user experience.

Tools to Analyze Javascript Bundles ????

 Let’s open our toolbox and see a few of the tools we can use to analyze js bundles and find scope for optimization.

1) Webpack Bundle Analyzer

1. Analyze which components and libraries are part of a bundle.
2. Analyze which components and libraries are part of a bundle.
   
3. Analyze which components and libraries are part of a bundle.
   

Here is a sample interactive treemap visualization generated using Webpack Bundle Analyzer.

We can easily add Webpack Bundle Analyzer in our next.config.js using the below code.

asasasasasasas