webpack-bundle-analyzer

(★ 12,660)

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

Owner Repos

webpack ★ 65,971

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

JavaScript
webpack-dev-server ★ 7,848

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.

JavaScript
mini-css-extract-plugin ★ 4,663

Lightweight CSS extraction plugin

JavaScript
css-loader ★ 4,320

CSS Loader

JavaScript
sass-loader ★ 3,892

Compiles Sass to CSS

JavaScript
tapable ★ 3,862

Just a little module for plugins.

JavaScript

File Explorer

ZIP Download
  • .babelrc
  • .browserslistrc
  • .editorconfig
  • .gitignore
  • .npm-upgrade.json
  • .nvmrc
  • .prettierignore
  • CHANGELOG.md
  • CONTRIBUTING.md
  • eslint.config.mjs
  • jest.config.js
  • LICENSE
  • package-lock.json
  • package.json
  • prettier.config.mjs
  • README.md
  • tsconfig.json
  • webpack.config.js

# Installation Guide

node
Prerequisites

Setup Steps

npm install

Install project dependencies.

npm run build

Build the project.

npm test

Run the test suite.

Key Commands

npm install --save-dev webpack-bundle-analyzer

Install webpack-bundle-analyzer as a dev dependency.

npm run build

Build the source code to generate output files.

npm test

Run project tests using Jest.

You can add BundleAnalyzerPlugin to your webpack config file to enable the visualization feature.

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Link
Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

brotli

View Details ▼

Compress/uncompress files with Brotli compression.

brotli {{path/to/file}}

Compress a file, creating a compressed version next to the file:

brotli {{[-d|--decompress]}} {{path/to/file.br}}

Decompress a file, creating an uncompressed version next to the file:

brotli {{path/to/file}} {{[-o|--output]}} {{path/to/compressed_output_file.br}}

Compress a file specifying the output filename:

🔍

gzip

View Details ▼

Compress/uncompress files with `gzip` compression (LZ77).

gzip {{path/to/file}}

Compress a file, replacing it with a `gzip` archive:

gzip {{[-d|--decompress]}} {{path/to/file.gz}}

Decompress a file, replacing it with the original uncompressed version:

gzip {{[-v|--verbose]}} {{path/to/file.gz}}

Display the name and reduction percentage for each file compressed:

🔍

npm install

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

stat

View Details ▼

Display file and filesystem information.
See also: `file`.

stat {{path/to/file}}

Display properties about a specific file such as size, permissions, creation date, and access date among others:

stat {{path/to/file}}

Show file properties such as size, permissions, creation date, and access date among others:

stat {{[-t|--terse]}} {{path/to/file}}

Display properties about a specific file, only showing the raw result data without labels:

🔍

webpack

View Details ▼

Bundle a web project's js files and other assets into a single output file.

webpack {{app.js}} {{bundle.js}}

Create a single output file from an entry point file:

webpack {{app.js}} {{bundle.js}} --module-bind '{{css=css}}'

Load CSS files too from the JavaScript file (this uses the CSS loader for CSS files):

webpack {{[-c|--config]}} {{webpack.config.js}} --progress

Pass a configuration file (with e.g. the entry script and the output filename) and show compilation progress:

🔍

yarn

View Details ▼

JavaScript and Node.js package manager alternative.

yarn global add {{module_name}}

Install a module globally:

yarn install

Install all dependencies referenced in the `package.json` file (the `install` is optional):

yarn add {{module_name}}@{{version}}

Install a module and save it as a dependency to the `package.json` file (add `--dev` to save as a dev dependency):

🔍

zstd

View Details ▼

Compress or decompress files with Zstandard compression.

zstd {{path/to/file}}

Compress a file into a new file with the `.zst` suffix:

zstd {{[-d|--decompress]}} {{path/to/file.zst}}

Decompress a file:

zstd {{[-d|--decompress]}} {{[-c|--stdout]}} {{path/to/file.zst}}

Decompress to `stdout`:

// repository documentation