webpack-visualizer - Visualize your Webpack bundle

  •        14

Visualize and analyze your Webpack bundle to see which modules are taking up space and which might be duplicates. This will output a file named stats.html in your output directory. You can modify the name/location by passing a filename parameter into the constructor.

http://chrisbateman.github.io/webpack-visualizer/
https://github.com/chrisbateman/webpack-visualizer

Dependencies:

d3 : ^3.5.6
mkdirp : ^0.5.1
react : ^0.14.0
react-dom : ^0.14.0

Tags
Implementation
License
Platform

   




Related Projects

html-webpack-plugin - Simplifies creation of HTML files to serve your webpack bundles

  •    Javascript

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader. The html-webpack-plugin works without configuration. It's a great addition to the ⚙️ webpack-config-plugins.

preload-webpack-plugin - A webpack plugin for injecting <link rel='preload|prefecth'> into HtmlWebpackPlugin pages, with async chunk support

  •    Javascript

A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>. This helps with lazy-loading. Note: This is an extension plugin for html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

html-webpack-template - a better default template for html-webpack-plugin

  •    HTML

This is a template for the webpack plugin html-webpack-plugin. It has a few extra features more than the default template which will hopefully make it less likely that you'll have to create your own index.html file in your webpack project. Templates for the html-webpack-plugin are implemented using underscore templates (previously, in 2.x, blueimp templates). You can write your own as well.

hard-source-webpack-plugin

  •    Javascript

HardSourceWebpackPlugin is a plugin for webpack to provide an intermediate caching step for modules. In order to see results, you'll need to run webpack twice with this plugin: the first build will take the normal amount of time. The second build will be signficantly faster. Install with npm install --save hard-source-webpack-plugin or yarn. And include the plugin in your webpack's plugins configuration.

write-file-webpack-plugin - Forces webpack-dev-server to write bundle files to the file system.

  •    Javascript

Forces webpack-dev-server program to write bundle files to the file system. This plugin has no effect when webpack program is used instead of webpack-dev-server.


grunt-webpack - integrate webpack into grunt build process

  •    Javascript

Use Webpack with Grunt. Install this grunt plugin next to your project's Gruntfile.js. You also need to install webpack yourself, this grunt plugin does not install webpack itself.

duplicate-package-checker-webpack-plugin - 🕵️ Webpack plugin that warns you when a build contains multiple versions of the same package

  •    Javascript

Webpack plugin that warns when your bundle contains multiple versions of the same package. It might be possible that a single package gets included multiple times in a Webpack bundle due to different package versions. This situation may happen without any warning, resulting in extra bloat in your bundle and may lead to hard-to-find bugs.

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

  •    Javascript

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

page-skeleton-webpack-plugin - Webpack plugin to generate the skeleton page automatically

  •    Javascript

Page Skeleton is a webpack plugin.The purpose of the plugin is to generate the corresponding skeleton screen page according to different route pages in your project, and to pack the skeleton screen page into the corresponding static route page through webpack. All examples are in the examples folder.

purifycss-webpack - Remove unused CSS with webpack

  •    Javascript

PurifyCSS for Webpack. This plugin uses PurifyCSS to remove unused selectors from your CSS. You should use it with the extract-text-webpack-plugin.

stylelint-webpack-plugin - A webpack plugin to lint your CSS/Sass code using stylelint

  •    Javascript

This module requires a minimum of Node v6.9.0 and webpack v4.0.0. Both stylelint-loader and this module have their uses. stylelint-loader lints the files you require (or the ones you define as an entry in your webpack config). However, @imports in files are not followed, meaning only the main file for each require/entry is linted.

copy-webpack-plugin - Copy files and directories with webpack

  •    Javascript

ℹ️ If you want webpack-dev-server to write files to the output directory during development, you can force it with the write-file-webpack-plugin.

friendly-errors-webpack-plugin - Recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience

  •    Javascript

Friendly-errors-webpack-plugin recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience. Simply add FriendlyErrorsWebpackPlugin to the plugin section in your Webpack config.

offline-plugin - Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)

  •    Javascript

This plugin is intended to provide an offline experience for webpack projects. It uses ServiceWorker, and AppCache as a fallback under the hood. Simply include this plugin in your webpack.config, and the accompanying runtime in your client script, and your project will become offline ready by caching all (or some) of the webpack output assets.

sw-precache-webpack-plugin - Webpack plugin that generates a service worker using sw-precache that will cache webpack's bundles' emitted assets

  •    Javascript

SWPrecacheWebpackPlugin is a webpack plugin for using service workers to cache your external project dependencies. It will generate a service worker file using sw-precache and add it to your build directory. A simple configuration example that will work well in most production environments. Based on the configuration used in create-react-app.

assets-webpack-plugin - Webpack plugin that emits a json file with assets paths

  •    Javascript

Webpack plugin that emits a json file with assets paths. When working with Webpack you might want to generate your bundles with a generated hash in them (for cache busting).

npm-install-webpack-plugin - Speed up development by automatically installing & saving dependencies with Webpack

  •    Javascript

Speed up development by automatically installing & saving dependencies with Webpack. It sucks to Ctrl-C your build script & server just to install a dependency you didn't know you needed until now.

prerender-loader - 📰 Painless universal pre-rendering for Webpack.

  •    Javascript

Painless universal prerendering for Webpack. Works great with html-webpack-plugin. Pre-rendering describes the process of rendering a client-side application at build time, producing useful static HTML that can be sent to the browser instead of an empty bootstrapping page.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.