Analyze and Optimize Webpack Bundles Size and Contents

  • Realize what’s really inside your bundle
  • Find out the modules make up the most of its size
  • Find modules that got there by mistake
  • Consider alternatives to optimize your bundle size

Webpack Bundle Analyzer

https://www.npmjs.com/package/webpack-bundle-analyzer

Webpack Visualizer

Webpack visualizer is another tool we can use to create a visual representation of your final bundle. you can use the webpack visualizer in two ways.

1) Using their web tool

The easiest way is to use their web tool to just upload your stats.json file. https://chrisbateman.github.io/webpack-visualizer/

2) Create stats.html using the webpack plugin

Webpack visualizer runs as a webpack plugin that generates a stats.html file containing an interactive visualization of your bundle contents. This method is useful if you want to include the creation of the stats.html as part of your CI/CD. It would be helpful for teams that want to continuously analyze every commit and have stats.html generated by the webpack visualizer to be part of your build artifacts in your CI/CD solution.

Bundlephobia

Aside from analyzing your bundle, you can also proactively be conscious of every dependency before adding to your bundle. Bundlephobia helps you to search packages and know what you are getting into, and the cost of the packages in your application. Bundlephobia also highlights the user/browser impact of this package when used in your application, like download and render timings. There is also a historical change between versions of the package you are analyzing highlighted in bundlephobia.

Bundlesize

There are different ways to monitor your bundle. One of the simplest ways is to make sure the changes you just made in your code didn’t bloat your bundle. Bundlesize is a simple tool that can be easily added as a step in your CI pipeline that keeps your bundle size in check. Bundlesize will fail if you exceed your maximum bundle size set for your project and also will highlight the delta from the primary branch of your code. This helps developers to see their commit’s impact/change in the bundle size.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store