DEV Community

Discussion on: 📦 webpack secrets

View post
Collapse
 
ankitutekar profile image
Ankit Utekar • • Edited

webpack bundle analyzer
It's a cool tool which generates a zoomable tree map showing what's inside your JavaScript bundle - size of each dependency ( and dependencies of dependencies recursively ) in minified, un-minified and gzipped format.
Setup is fairly simple, do give it a try.

GitHub logo webpack-contrib / webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

npm node deps tests downloads

Webpack Bundle Analyzer

Visualize size of webpack output files with an interactive zoomable treemap.

Install

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
Enter fullscreen mode Exit fullscreen mode

Usage (as a plugin)

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}
Enter fullscreen mode Exit fullscreen mode

It will create an interactive treemap visualization of the contents of all your bundles.

webpack bundle analyzer zoomable treemap

This module will help you:

  1. Realize what's really inside your bundle
  2. Find out what modules make up the most of its size
  3. Find modules that got there by mistake
  4. Optimize it!

And the best thing is it supports minified bundles! It parses them to get real size of bundled modules And it also shows their gzipped sizes!

Options (for plugin)

new BundleAnalyzerPlugin(options?: object)
Enter fullscreen mode Exit fullscreen mode
Name Type Description
analyzerMode One of: server, static, json, disabled
…
View on GitHub
Collapse
 
nickytonline profile image
Nick Taylor •

Yeah that's a great one. We have it setup on react-slingshot. 🔥