How to Analyze and Reduce Your JavaScript Bundle Size with DevTools, Lighthouse, and Webpack Bundle Analyzer

Original author: Houssein Djirdeh

Translator: UC International R&D Jothy

Welcome to the “UC International Technology” public account, where we share high‑quality technical articles on client, server, algorithms, testing, data, frontend, and more, including both original and translated content.

Editorial note: npm brings many conveniences to front‑end engineers; a single install command lets you use countless well‑crafted libraries, but your application can silently become “bloated”. Today, Google Web engineer Djirdeh shows how to “slim down” by removing excess code.

npm revitalizes the JavaScript ecosystem, giving you easy access to over 500,000 public packages. However, we often import libraries without fully utilizing them. To address this, you need to analyze your bundle , detect unused code, and delete unnecessary libraries.

Analyze your bundle

The simplest way to view all network request sizes is to open the Network panel in Chrome DevTools, check Disable cache(禁用缓存) , and then reload the page.

The Coverage tab in DevTools shows how much CSS and JS code in your application is unused.

Using Lighthouse’s Node CLI with a full configuration enables the “Unused JavaScript” audit to track how much unused code your app ships.

If you are using Webpack, the Webpack Bundle Analyzer plugin helps you visualize the composition of your bundle.

Simply add the plugin to your Webpack configuration like any other plugin.

While we often use Webpack for single‑page applications, other bundlers such as Parcel and Rollup also provide visual bundle analysis tools.

After reloading the app with the plugin, you will see a scalable tree map of the entire bundle.

This visualization lets you identify which parts of the bundle are large and understand all imported libraries, helping you confirm whether you are using any unnecessary code.

Delete unused libraries

In the tree map, the @firebase domain contains many packages. If you only need the Firebase database component, change the import statement to fetch that specific file only.

Note that the larger the application, the more complex this process becomes.

For packages you are confident are not used elsewhere, examine which top‑level dependencies rely on them, import only the components you need, and delete any library you no longer use. If a library isn’t required on the initial page load, consider lazy‑loading it.

Delete unnecessary libraries

Not all libraries can be easily split and imported selectively; in such cases, consider building a custom solution or switching to a lighter alternative. However, before completely removing a library, weigh the complexity and effort involved.

Recommended reading: Redux author discusses “UI engineering elements” and how to become a domain expert

“UC International Technology” is dedicated to sharing high‑quality technical articles with you. Follow our public account and share the articles with your friends.