Skip to content
Learn Measure Blog Case studies About
On this page
  • Analyze your bundle
  • Remove unused libraries
  • Remove unnecessary libraries

Remove unused code

npm makes adding code to your project a breeze. But are you really using all
those extra bytes?

Nov 5, 2018
Available in: Español, 日本語, 한국어, Português, Русский, 中文, English
Appears in: Fast load times
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
On this page
  • Analyze your bundle
  • Remove unused libraries
  • Remove unnecessary libraries

Registries like npm have transformed the JavaScript world for the better by allowing anyone to easily download and use over half a million public packages. But we often include libraries we're not fully utilizing. To fix this issue, analyze your bundle to detect unused code. Then remove unused and unnecessary libraries.

Analyze your bundle #

DevTools makes it easy to see the size of all network requests:

  1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
  2. Click the Network tab.
  3. Select the Disable cache checkbox.
  4. Reload the page.
Network panel with bundle request

The Coverage tab in DevTools will also tell you how much CSS and JS code in your application is unused.

Code Coverage in DevTools

By specifying a full Lighthouse configuration through its Node CLI, an "Unused JavaScript" audit can also be used to trace how much unused code is being shipped with your application.

Lighthouse Unused JS Audit

If you happen to be using webpack as your bundler, Webpack Bundle Analyzer will help you investigate what makes up the bundle. Include the plugin in your webpack configurations file like any other plugin:

module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}

Although webpack is commonly used to build single-page applications, other bundlers, such as Parcel and Rollup, also have visualization tools that you can use to analyze your bundle.

Reloading the application with this plugin included shows a zoomable treemap of your entire bundle.

Webpack Bundle Analyzer

Using this visualization allows you to inspect which parts of your bundle are larger than others, as well as get a better idea of all the libraries that you're importing. This can help identify if you are using any unused or unnecessary libraries.

Remove unused libraries #

In the previous treemap image, there are quite a few packages within a single @firebase domain. If your website only needs the firebase database component, update the imports to fetch that library:

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

It is important to emphasize that this process is significantly more complex for larger applications.

For the mysterious looking package that you're quite sure is not being used anywhere, take a step back and see which of your top-level dependencies are using it. Try to find a way to only import the components that you need from it. If you aren't using a library, remove it. If the library isn't required for the initial page load, consider if it can be lazy loaded.

And in case you're using webpack, check out the list of plugins that automatically remove unused code from popular libraries.

Try it

Remove unused code.

Remove unnecessary libraries #

Not all libraries can be easily broken down into parts and selectively imported. In these scenarios, consider if the library could be removed entirely. Building a custom solution or leveraging a lighter alternative should always be options worth considering. However, it is important to weigh the complexity and effort required for either of these efforts before removing a library entirely from an application.

Performance
Last updated: Nov 5, 2018 — Improve article
Codelabs

See it in action

Learn more and put this guide into action.

  • Remove unused code
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.