webpack-bundle-size-analyzer - A tool for finding out what contributes to the size of Webpack bundles

  •        95

A small utility to help you find out what is contributing to the size of your Webpack bundles. Webpack has a JSON output mode which produces detailed machine-readable information about everything that has been included in a generated bundle.

http://github.com/robertknight/webpack-bundle-size-analyzer

Dependencies:

commander : ^2.7.1
filesize : ^3.1.2
humanize : 0.0.9

Tags
Implementation
License
Platform

   




Related Projects

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

  •    Javascript

Visualize size of webpack output files with an interactive zoomable treemap. It will create an interactive treemap visualization of the contents of all your bundles.

size-plugin - Track compressed Webpack asset sizes over time.

  •    Javascript

Prints the gzipped sizes of your webpack assets and the changes since the last build. This is not an official Google product.

whybundled - Answers the question – Why the hell is this module in a bundle?

  •    Javascript

Ever wondered why any particular module ended up in a bundle? WhyBundled is here to answer exactly this question. It's meant to be used alongside stats report from webpack.

size-limit - Prevent JS libraries bloat

  •    Javascript

Size Limit is a tool to prevent JavaScript libraries bloat. With it, you know exactly for how many kilobytes your JS library increases the user bundle. You can add Size Limit to your continuous integration service (such as Travis CI) and set the limit. If you accidentally add a massive dependency, Size Limit will throw an error.

Webpack - A bundler for javascript and friends

  •    Javascript

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.


prop-types - Custom React PropType validators that we use at Airbnb.

  •    Javascript

Custom React PropType validators that we use at Airbnb. Use of airbnb-js-shims or the equivalent is recommended.Since PropTypes are typically not included in production builds of React, this library’s functionality serves no useful purpose. As such, when the NODE_ENV environment variable is "production", instead of exporting the implementations of all these prop types, we export mock functions - in other words, something that ensures that no exceptions are thrown, but does no validation. When environment variables are inlined (via a browserify transform or webpack plugin), then tools like webpack or uglify are able to determine that only the mocks will be imported - and can avoid including the entire implementations in the final bundle that is sent to the browser. This allows for a much smaller ultimate file size, and faster in-browser performance, without sacrificing the benefits of PropTypes themselves.

import-cost - displays the import size of the package you are importing inside the code editor

  •    Javascript

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size. In this project we use lerna for managing the multiple packages.

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.

loadable-components - React code splitting made easy ✂️✨

  •    Javascript

React code splitting made easy. Reduce your bundle size without stress ✂️✨. Webpack allows modern code splitting via the dynamic import syntax. Loadable Components makes it possible to use that awesome feature with React. It is compatible with react-router and server side rendering. The API is designed to be as simple as possible to avoid useless complexity and boilerplate.

extract-text-webpack-plugin - Extracts text from bundle into a file

  •    Javascript

Extract text from a bundle, or bundles, into a separate file. ⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

webpack-visualizer - Visualize your Webpack bundle

  •    Javascript

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.

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.

karma-webpack - Karma webpack Middleware

  •    Javascript

This configuration is more performant, but you cannot run single test anymore (only the complete suite). The above configuration generates a webpack bundle for each test. For many test cases this can result in many big files. The alternative configuration creates a single bundle with all test cases.

electron-webpack - Scripts and configurations to compile Electron applications using webpack

  •    TypeScript

Because setting up webpack in the electron environment shouldn't be difficult. Modern web development practices today require a lot of setup with things like webpack to bundle your code, babel for transpiling, eslint for linting, and so much more that the list just goes on. Unfortunately when creating electron applications, all of that setup just became much more difficult. The primary aim of electron-webpack is to eliminate all preliminary setup with one simple install so you can get back to developing your application.

polished - A lightweight toolset for writing styles in JavaScript ✨

  •    Javascript

When ✨ polished modules are imported properly, tree shaking in webpack and Rollup can be leveraged to reduce your bundle size. ✨ polished has first-class Flow support with zero configuration to assist you in finding type errors while using our modules.

bonsai - Understand the tree of dependencies inside your webpack bundles, and trim away the excess.

  •    Javascript

Trim your javascript dependency tree. The quickest way to get started is to generate a Webpack stats file, and then drag and drop it into https://pinterest.github.io/bonsai/analyze.

file-loader - File Loader

  •    Javascript

This module requires a minimum of Node v6.9.0 and works with Webpack v3 and Webpack v4. And run webpack via your preferred method. This will emit file.png as a file in the output directory (with the specified naming convention, if options are specified to do so) and returns the public URI of the file.

webpack.js.org - New repository for webpack documentation and more!

  •    Javascript

Guides, documentation, and all things webpack.We haven't created issues for the other sections yet, but they will be coming soon. For dev-related work please see General - Current Longterm Plan, which will soon be replaced by a more dev-specific issue.

symfony-react-sandbox - Example of integration with React and Webpack (Webpack Encore) for universal (isomorphic) React rendering, using Limenius/ReactBundle and Limenius/LiformBundle

  •    Javascript

This sandbox provides an example of usage of ReactBundle with server and client-side React rendering (universal/isomorphical) and its integration with a fitting Webpack Encore setup. It also provides an example of the usage of LiformBundle to generate a json-schema from Symfony forms and a forms and validation in React from that schema. -Note: If you are new to React.js, please note that this sandbox or the bundle are not by any means required to use React with Symfony. This shocases how to do some advanced features such as Server Side Rendering, a better integration with forms, injecting components directly from Twig tags, that may be difficult.