Techstacker
Light ModeDark ModeReset dark mode. Falls back to OS dark mode setting.

Pages

No results for 'undefined'

Blog Posts

No results for 'undefined'
Powered by Algolia

How Much Size Does An NPM Package Add to Your Total Bundlesize?

Oct 20, 20191 min readPerformance, Web Developer Tools, NPMViews:

When you install NPM packages to your project, you often don’t know how much size it adds to your project’s total bundle size. This is important, because as you start adding packages over time your bundle size will keep growing, which will often hurt your app’s performance, either development or production mode, or both.

You want your total bundle size to be as small as possible to optimize the initial page load speed for new visitors. This is specially important if you work with modern front-end technologies like React, Angular, or Vue.

Fortunately, BundlePhobia comes to the rescue. To find out the cost of adding any npm package to your project, go to bundlephobia.com and start typing the name of the package you want to check and it will show up in an auto-suggest dropdown.

Click on your package and you will be taken to a page that will show you everything you need to know about this package’s size, from minified to gzipped, to download time.

Here’s an example showing the size stats of the React Spring animation library:

Bundle Phobia stats on React Spring npm package

You can even upload your package.json to BundlePhobia, to see an overview of all your projects dependencies ranked in order of their size.

To upload your package.json file just click on the Scan a package.json file button on the front page.

What a great service!