• Stars
    star
    230
  • Rank 174,053 (Top 4 %)
  • Language
    JavaScript
  • License
    Other
  • Created about 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Electrify is an webpack visualizer for analyzing webpack bundles.

electrify NPM version Build Status NPM Downloads

What is Electrify?

Electrify is an webpack visualizer tool for visualizing and analyzing Webpack bundles, it is a UI tool based on D3.js for visualizing the module tree of electrode + webpack project bundles. It's especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build process.

Checkout a live working DEMO.

screencast

Installation

Electrify lives on npm, so if you haven't installed npm already make sure you have node installed on your machine first.

Installing should then be as easy as:

sudo npm install -g electrode-electrify

Drag & Drop Stats JSON

Electrify supports drag and drop of webpack stats json to visualize it. Running it easy:

$ npm run start

drag

Command-Line Interface

Note: you'll need to build your project with the fields: null flag if you are using webpack-stats-plugin, pass a fully generated webpack-stats-object for electrify to render the tree accurately.

electrify [stats-bundle(s)...] {options}

Options:
  -h, --help    Displays these instructions.
  -O, --open    Opens viewer in a new browser window automatically
  -m, --mode    the default file scale mode to display: should be
                either "count" or "size". Default: size

When you install electrify globally, electrify command-line tool is made available as the quickest means of checking out your bundle. As of [email protected], the tool takes any webpack-stats object example as input and spits out a standalone HTML page as output.

You can easily chain the stats file into another command, or use the --open or -O flag to open electrify in your browser automatically:

For example:

electrify build/stats.json --open

API Integration

Note: you'll need to build your project with the fields: null flag if you are using webpack-stats-plugin, pass a fully generated webpack-stats-object for electrify to render the tree accurately.

electrify.bundle(stats, [opts], callback)

A callback-style interface for electrify: takes a single stats file or an array of stats (note: the file names and not the file contents), calling callback(err, html) with either an error or the resulting standalone HTML file as arguments.

This currently mirrors how electrify is currently implemented, but the stream API is a little more convenient to work with.

This method takes the following options:

  • header: HTML to include above the visualisation. Used internally to render the "Fork me on GitHub" ribbon.
  • footer: HTML to include beneath the visualisation. Used internally for the description on the demo page.
  • mode: the default file scale mode to display: one of either "count" or "size", defaulting to "size".

bundle api example: electrify.bundle(stats, [opts], callback)

Palettes

You can switch between multiple color palettes, most of which serve to highlight specific features of your bundle:

Structure Highlights

Structure Highlights

Highlights node_modules directories as green and lib directories as orange. This makes it easier to scan for "kitchen sink" modules or modules with lots of dependencies.

File Types

File Types

Highlights each file type (e.g. .js, .css, etc.) a different color. Helpful for tracking down code generated from a transform that's bloating up your bundle more than expected.

Original/Pastel

Pastel

Nothing particularly special about these palettes – colored for legibility and aesthetics respectively.

Search By Filename

Search by filename to get to the exact location of the file along with size that file is contributing to the Javascript bundle. Props to @jherr for implementing the Search functionality.

License

Apache-2.0 Β© WalmartLabs
Built with ❀️ by Team Electrode @WalmartLabs.

Other useful bundle/stats viewers

More Repositories

1

electrode

Web applications with node.js and React
HTML
2,101
star
2

electrode-native

A platform to ease integration&delivery of React Native apps in existing mobile applications
TypeScript
725
star
3

electrode-io.github.io

The public website of the Electrode platform
HTML
336
star
4

electrode-react-ssr-caching

Optimize React SSR with profiling and component caching
JavaScript
316
star
5

electrode-explorer

An Electrode application that showcases all of your components in a live demo
JavaScript
254
star
6

electrode-server

Electrode's configurable web server using Hapi.js atop Node.js
JavaScript
224
star
7

electrode-ota-server

Electrode Over The Air Server for hot deployment of React Native and Cordova mobile apps
JavaScript
204
star
8

electrode-csrf-jwt

Stateless Cross-Site Request Forgery (CSRF) protection with JWT
JavaScript
126
star
9

above-the-fold-only-server-render

An Electrode component for optionally skipping server side render of components outside of Above the fold
JavaScript
117
star
10

electrode-confippet

node.js environment aware application configuration
TypeScript
108
star
11

isomorphic-loader

Webpack isomorphic loader tools to make Node require handle files like images for Server Side Rendering (SSR)
JavaScript
68
star
12

electrode-archetype-njs-module-dev

A WalmartLabs flavored NodeJS Module archetype
JavaScript
67
star
13

electrode-bundle-analyzer

Analyze your webpack deduped and minified bundle JS file.
JavaScript
66
star
14

electrode-webpack-reporter

A HTML based reporter for webpack dev server
JavaScript
59
star
15

electrode-gulp-helper

Helper functions for using gulp
JavaScript
59
star
16

electrode-check-dependencies

An Electrode module to verify component dependencies against a list
JavaScript
58
star
17

electrode-docgen

A custom metadata extractor and documentation generator for the Electrode framework
JavaScript
57
star
18

fynpo

πŸ› οΈπŸ“¦ a node.js monorepo manager
JavaScript
55
star
19

electrode-static-paths

Electrode server decor to serve static files
JavaScript
55
star
20

react-native-electrode-bridge

Electrode Native - Bridge
Java
44
star
21

xarc-run

npm run scripts concurrently and serially, and more.
JavaScript
42
star
22

memcache

Node.js memcached client with the most efficient ASCII protocol parser
TypeScript
37
star
23

electrode-ota-desktop

Electrode OTA Desktop Client
JavaScript
22
star
24

electrode-ota-ui

[Deprecated for electrode-ota-server/electrode-ota-ui] Electrode OTA Web/Client UI
JavaScript
17
star
25

ern-navigation

Electrode Native solution for React Native navigation
JavaScript
12
star
26

movies-reloaded-miniapp

Our new movie miniapp built on the Electrode Native Navigation.
JavaScript
10
star
27

car-buying-instructions

JavaScript
9
star
28

movielist-miniapp

Electrode Native - Movie List MiniApp (Getting Started)
Objective-C
8
star
29

fastify-server

Electrode using Fastify
TypeScript
6
star
30

moviedetails-miniapp

Electrode Native - Movie Details MiniApp (Getting Started)
JavaScript
6
star
31

electrode-keepalive

node.js HTTP agent with customized keep alive
JavaScript
6
star
32

kax

TypeScript
5
star
33

react-native-livebundle

LiveBundle Native Module
Java
3
star
34

livebundle

LiveBundle CLI
TypeScript
3
star
35

electrode-native-starter-manifest

Electrode Native - Starter Manifest
3
star
36

react-native-ernnavigation-api

Electrode Native - Navigation API (Getting Started)
Swift
3
star
37

electrode-native-manifest

Electrode Native - Master Manifest
Java
3
star
38

electrode-native-showcaseapp-android

Native application that showcases electrode native MiniApps and APIs.
Java
2
star
39

electrode-native-sample-cauldron

Sample Electrode Native Cauldron
2
star
40

fynpo-old

Supplement tools for using fyn with lerna
JavaScript
2
star
41

car-buying-service

mock service for car buying app
JavaScript
2
star
42

car-buying

A sample car buying app
JavaScript
2
star
43

ern-bundle-store

Electrode Native Bundle Store Server
TypeScript
2
star
44

electrode-native-website

The site and docs for Electrode Native
JavaScript
2
star
45

react-native-ernmovie-api

Electrode Native - Movie API (Getting Started)
Swift
2
star
46

ernnavigation-api-impl-native

Native implementation of ernnavigation-api
Objective-C
2
star
47

electrode-demo-app

Demo application generated by Electrode platform unmodified
JavaScript
1
star
48

react-native-ernmovie-api-impl

Objective-C
1
star
49

ern-sourcemap-store

Electrode Native sourcemap store server
TypeScript
1
star
50

electrode-native-binarystore

Electrode Native - Binary Store
JavaScript
1
star
51

ern-container-transformer-xcframework

Electrode Native XCFramework Container Transformer
Shell
1
star
52

ern-container-publisher-maven

Electrode Native Maven Container Publisher
TypeScript
1
star
53

resolve-alias

set virtual module aliases for resolve and require
JavaScript
1
star
54

ern-base-composite-starter

Electrode Native Base Composite Starter
JavaScript
1
star
55

electrode-native-showcaseapp-ios

Swift
1
star
56

react-native-ernmovie-api-impl-js

JavaScript
1
star