webpack-bundle-analyzer

What is webpack-bundle-analyzer?

The webpack-bundle-analyzer package is a tool for analyzing the size of webpack output files. It helps developers understand where code bloat is coming from by visualizing the size of webpack-generated bundles and how they are related. It can be used to optimize the size of the output by identifying large chunks and their dependencies.

What are webpack-bundle-analyzer's main functionalities?

Visualizing Size of Webpack Bundles

This feature allows developers to visualize the size of their webpack bundles. The code sample shows how to include the BundleAnalyzerPlugin in a webpack configuration.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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

Customizing the Analyzer Report

Developers can customize the analyzer's report output by specifying options such as the mode, report filename, and whether to automatically open the report. The code sample demonstrates how to set these options.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle_sizes.html',
      openAnalyzer: false
    })
  ]
};

Analyzing Bundle Content

This feature generates a detailed JSON file with statistics about the bundle's content, which can be further analyzed or tracked over time. The code sample shows how to enable this feature and set the stats file name.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      generateStatsFile: true,
      statsFilename: 'bundle_stats.json'
    })
  ]
};

Other packages similar to webpack-bundle-analyzer

source-map-explorer

The source-map-explorer package analyzes JavaScript bundles using the source maps. It helps to understand where code bloat is coming from. Unlike webpack-bundle-analyzer, which provides a web-based UI, source-map-explorer generates a static HTML file with a treemap visualization of the bundle.

rollup-plugin-visualizer

This package is similar to webpack-bundle-analyzer but is designed for use with Rollup instead of webpack. It visualizes and analyzes the module tree of Rollup bundles. It provides a visual representation of how much space each module takes up and can output both HTML and JSON files.

README

Carrot Search FoamTree

Carrot Search FoamTree is an interactive visualization of hierarchical data structures, such as groups of documents or network domains. It works very well with documents or search results clustered using the Lingo3G document clustering engine.

Contents of this package

./carrotsearch.foamtree.js FoamTree implementation, required at runtime.

./carrotsearch.foamtree.asserts.js Option value validator, useful for development and debugging, not required at runtime.

./carrotsearch.foamtree.util.*.js Utility scripts that handle a number of typical programming tasks around FoamTree.

./api/ Documentation and API examples.

./demos/ More examples.

./tests/ Automated functional tests of FoamTree.

Documentation

Open api/index.html in a modern browser (Chrome or Firefox recommended).

Examples are fully functional when served over the HTTP protocol. Start up a local HTTP daemon (Java required):

bin/nhttpd.sh -p 8080 # (Linux, Mac) bin\nhttpd.bat -p 8080 # (Windows)

and open http://localhost:8080 in a browser.

Contact

For further information and support contact Carrot Search: [e-mail]

Build information

Build type : Carrot Search FoamTree HTML5 (demo variant) Build version : 3.4.4 Build number : FOAMTREE-SOFTWARE4-DIST-26 Build time : Sep 23, 2016 Built by : bamboo Build revision: 36955f78f6b79223438db3b18b9b64b5aad799bb/36955f78

Carrot Search Confidential Copyright 2002-2016 Carrot Search