All Projects → sghall → bundle-inspector-webpack-plugin

sghall / bundle-inspector-webpack-plugin

Licence: MIT License
Bundle Inspector | Analysis Tool for Webpack

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to bundle-inspector-webpack-plugin

Wxconn
统计你的微信连接多少人,包括好友、群聊人数,并提供去重后的长图结果
Stars: ✭ 128 (+573.68%)
Mutual labels:  tools, analysis
Webpack.js.org
Repository for webpack documentation and more!
Stars: ✭ 2,049 (+10684.21%)
Mutual labels:  bundle, webpack-plugin
BeelabUserBundle
👥 Simple user management for Symfony.
Stars: ✭ 17 (-10.53%)
Mutual labels:  bundle
MGT-python
Musical Gestures Toolbox for Python
Stars: ✭ 25 (+31.58%)
Mutual labels:  analysis
prjxray-db
Project X-Ray Database: XC7 Series
Stars: ✭ 52 (+173.68%)
Mutual labels:  tools
HITMers
Management system for Harbin Institute of Technology Museum
Stars: ✭ 70 (+268.42%)
Mutual labels:  tools
syncopy
Systems Neuroscience Computing in Python: user-friendly analysis of large-scale electrophysiology data
Stars: ✭ 19 (+0%)
Mutual labels:  analysis
mozitools
Mozi Botnet related tools helping to unpack a sample, decode a configuration and track active Mozi nodes using DHT.
Stars: ✭ 23 (+21.05%)
Mutual labels:  tools
forza-painter
Import images into Forza
Stars: ✭ 228 (+1100%)
Mutual labels:  tools
redis-key-dashboard
This tool allows you to do a small analysis of the amount of keys and memory you use in Redis. It allows you to see overlooked keys and notice overuse.
Stars: ✭ 42 (+121.05%)
Mutual labels:  analysis
lapa
Universal AWS Lambda packager
Stars: ✭ 20 (+5.26%)
Mutual labels:  tools
FisherMan
CLI program that collects information from facebook user profiles via Selenium.
Stars: ✭ 117 (+515.79%)
Mutual labels:  tools
kmm-awesome
An awesome list that curates the best KMM libraries, tools and more.
Stars: ✭ 598 (+3047.37%)
Mutual labels:  tools
TableBundle
Symfony Bundle for easy pagination and filtering
Stars: ✭ 24 (+26.32%)
Mutual labels:  bundle
hack-tools
"Кали-заменитель". Располагает в себе большое количество утилит для взлома.
Stars: ✭ 39 (+105.26%)
Mutual labels:  tools
dftools
Tools for Star Wars: Dark Forces assets.
Stars: ✭ 18 (-5.26%)
Mutual labels:  tools
reactools
Create React interfaces is easy.
Stars: ✭ 14 (-26.32%)
Mutual labels:  tools
tinyimg-webpack-plugin
A webpack plugin for compressing image
Stars: ✭ 61 (+221.05%)
Mutual labels:  webpack-plugin
import-graph
🕵🏻‍♂️ Collect data about your dependencies
Stars: ✭ 35 (+84.21%)
Mutual labels:  tools
Photoshop-Javascript-Tools
Utility scripts to speed up daily photoshopping and automate annoying tasks
Stars: ✭ 35 (+84.21%)
Mutual labels:  tools

bundle-inspector-webpack-plugin

Under development. Feedback welcome.

See a demo in your browser - NOT mobile friendly

CLI:

npm install -g bundle-inspector-webpack-plugin

Basic usage:

bundle-inspector-webpack-plugin /path/to/webpack/stats.json

How do I get JSON stats from webpack?

webpack --json > stats.json

See a demo:

bundle-inspector-webpack-plugin --demo

Webpack Plugin:

npm install bundle-inspector-webpack-plugin --save-dev

CJS Import:

const BundleInspector = require('bundle-inspector-webpack-plugin');

// Add it to the plugins in your webpack config...
// ...
plugins: [new BundleInspector()]
// ...

ES6 Import:

import BundleInspector from 'bundle-inspector-webpack-plugin';

// Add it to the plugins in your webpack config...
// ...
plugins: [new BundleInspector()]
// ...

The server listens via websockets so it will update as you're developing. The 3D graph can be resource intensive, so it may be better to keep it on the treemap while your working. It will refresh to the page you're currently on each time webpack updates.

Shoutouts

Uses the data processing from the awesome Webpack Bundle Analyzer. The app is built using Create React App. Lot of ideas and inspiration from Bundle Buddy.

Data Views:

3D Force Directed Graph

Uses:

d3-force-3d - 3D layout

three.js - JavaScript WebGL

subunit - WebGL Selections

Zoomable Treemap

Uses:

d3 - Data Visualization Library

Uses the zoomable treemaps concept by Mike Bostock.

Screenshots:

Bundle Inspector Bundle Inspector

Roadmap

It's early days for this project. Lots of work to be done on the visualizations to make them more helpful.

Have a suggestion/idea/comment/criticism? Open an issue.

Logo image created by Oksana Latysheva from the Noun Project

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].