Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

webpack-runtime-analyzer

smelukov216MITdeprecated1.5.0

Please, use @statoscope/webpack-plugin - a brand new analyzer

Webpack plugin for analyzing internal processes, state and structure of bundles

webpack, runtime, building, analyzer, rempl, remote, devtool

readme

npm

webpack-runtime-analyzer

Webpack 1.x/2.x plugin for analyzing internal processes, state and structure of bundles. Built on rempl.

Install

npm install webpack-runtime-analyzer --save-dev

Usage

Add plugin to your webpack config:

var RuntimeAnalyzerPlugin = require('webpack-runtime-analyzer');

// ...

plugins: [new RuntimeAnalyzerPlugin()]

You can set optional configuration for RuntimeAnalyzerPlugin constructor with this defaults:

new RuntimeAnalyzerPlugin({
    // Can be `standalone` or `publisher`.
    // In `standalone` mode analyzer will start rempl server in exclusive publisher mode.
    // In `publisher` mode you should start rempl on your own.
    mode: 'standalone',
    // Port that will be used in `standalone` mode to start rempl server.
    // When set to `0` a random port will be chosen.
    port: 0,
    // Automatically open analyzer in the default browser. Works for `standalone` mode only.
    open: false,
    // Use analyzer only when Webpack run in a watch mode. Set it to `false` to use plugin
    // in any Webpack mode. Take into account that a building process will not be terminated
    // when done since the plugin holds a connection to the rempl server. The only way
    // to terminate building process is using `ctrl+c` like in a watch mode.
    watchModeOnly: true
})

For publisher mode you should start rempl server on your own:

npm install -g rempl-cli
rempl

Also, you can use the GUI to control rempl server.

After you run Webpack you can open web interface of analyzer.

  • In standalone mode the link to the web interface will be printed after build is done. With open option set to true, the web interface will be opened in default browser automatically.
  • In publisher mode your should open URL of the rempl server, usually, it's http://localhost:8177/. You can set custom rempl server url via REMPL_SERVER environment variable.

Try the example to see how it works:

cd example
npm i
npm run dev

Key features

Dashboard

The list of the modules and the assets is always at hand.

The left list

The left list contains all modules in your bundle.

Click on a module name to view detail info about the module.

Click on a module name withholding shift key to open a file that related with this module in your editor.

The right list

The right list contains building output (chunks, static, etc).

Dependency graph

Take a look at the dependencies of the modules and at the modules stats.

Module types

There are a few basic module types:

  • normal - module that you are requiring with require(...)
  • context - complex module that unites other modules when you are using require.context(...)

Some modules can be marked as entry. It means that this module is declared in entry section in you webpack-config.

The modules is separated by file types (scripts, templates, styles, etc). Every file type has a different color. You can see these colors at the nodes of graph or at the color bar above the graph.

You can hover mouse cursor at the nodes of graph or at the color bar sections and see an additional module-info or a file type statistic.

Controls

  • zooming graph with mouse/touchpad scrolling
  • changing graph position with drag and drop on the white field.
  • changing rendering speed by sliding speed slider
  • pause/resume graph rendering with space-key

File size map

Look at the file map and find out why your bundle is so big.

Controls

  • click to some block to expose it
  • press escape to return to the root

Module details

Displays more useful details about the modules.

In the text input, you can choose a module or a file which info you want to see. Just start typing module/file name and choose it from the suggestion list.

In the table you can see some modules statistic:

Require

Displays modules are required by chosen module/file.

Occurrences

Displays modules are requiring chosen module/file.

Retained

Displays modules that required by chosen module/file recursively.

For example, we have three modules: foo, bar and baz.

If foo requires bar and bar requires baz then:

  • retained of foo is 2 (bar and baz)
  • retained of bar is 1 (baz)
  • retained of baz is 0

Exclusive

Displays modules are required only by this module/file and by all its dependencies recursively.

For example, we have three modules: foo, bar and baz.

Case 1: If foo requires bar then foo exclusive is 1 because no more modules that require bar.

Case 2: If foo and bar requires baz then:

  • foo exclusive is 0 because bar also requires baz.
  • bar exclusive is 0 because foo also requires baz.

Case 3: If foo requires bar and bar requires baz then:

  • foo exclusive is 2 because no more modules that require bar and baz
  • bar exclusive is 1 because no more modules that require baz

Controls

  • click on a module name to view detail info about the module
  • click on a module name withholding shift-key to open a file that related with this module in your editor

Realtime analyzing

Analyzing process is performing in realtime.

Open in editor

You can open any bundle file in you favorite editor. Just set the EDITOR variable in your environment then you will may click on any file path withholding shift key to open the file in a chosen editor.

For example: export EDITOR=sublime && webpack -w

For more information about supported editors see open-in-editor documentation.

Source map support

  • enable source-map in your webpack config (e.g. devtool: 'source-map')
  • click on some Required module in details page and your editor will open the place (file, line and column) where clicked module was required by a filtered module
  • click on some Occurrences module in details page and your editor will open the place (file, line and column) where clicked module are requiring filtered module

Integration

You can use Webpack Runtime Analyzer everywhere when having an access to a web-view (e.g. web pages, browser plugins, mobile browsers and applications).

Atom Editor

Some code editors have access to a web view (e.g. iframe) and this is a great opportunity to integrate Webpack Runtime Analyzer in these editors to use unique editor features.

You can use Webpack Runtime Analyzer in Atom Editor by installed the plugin.

This plugin creates a bridge between the editor and Webpack Runtime Analyzer. It allows you to open the UI directly in an editor tab and observing current editing file.

Open UI in editor

Just type Rempl in command palette and enter rempl-server url (http://localhost:8177 by default).

Info about editing file

If the editing file is a part of the bundle, you can see the info about it in the following places:

  • details page in the UI
  • the bottom bar of the UI
  • the status bar of the Editor (two-way communication)

The bottom bar exists only when the UI is running within editor

How about other editors?

VS Code support is in plans... But if you want it faster, then like this comment ;)

Working with huge bundles

In huge bundles, there are many modules that are useless for analyzing.

For example, look at the AST Explorer bundle:

In this case graph is not usable, moreover overloaded graph decreases rendering performance.

You can enable Hide 3rd party modules in the Options menu to hide modules that aren't requiring your project modules.

So, modules list, graph and file map will contain only modules that requiring your project modules.

Hide 3rd party modules is enabled by default.

Webpack 1.x support

All features is working correctly with webpack 2.x and 1.x

License

MIT

changelog

1.5.0 (May 20, 2017)

UI

  • supported sorting for the tables (#16)
  • added modules stat at the top of the table in detail page (#16)

1.4.3 (April 27, 2017)

  • normalize file path on windows (fixed #14, thanks to @lahmatiy)
  • fix issue with scrollbars on body on windows (@lahmatiy)

1.4.2 (April 12, 2017)

  • bump rempl version

1.4.1 (April 8, 2017)

  • bump rempl version
  • support new rempl environment implementation

1.4.0 (April 4, 2017)

Plugin

  • get original position of module require
  • remove webpack from dependencies

UI

  • move openInEditor to transport
  • support original position of module require

1.3.1 (March 31, 2017)

Plugin

  • fix possible crash

1.3.0 (March 31, 2017)

Plugin

  • bump rempl version
  • generate file/module links
  • integration with open-in-editor
  • fix bug when the plugin is working only in NON-watch mode when watchModeOnly is false

UI

  • rename env page to details
  • add filter text input to details page
  • add table mode switcher to details page
  • rework status bar
  • rework bottom bar
  • file map now display all module files (ignore hide 3rd party option)
  • rework tooltip on file map

1.2.0 (March 25, 2017)

Plugin

  • bumped rempl version
  • fixed a bug with multiple subscribing on compilation events after every building
  • rempl server was integrated into the plugin (closes #4)
  • open UI automatically
  • generate modules links
  • generate retained module info
  • generate exclusive module info

UI

  • old webtree replaces by FoamTree (closes #11)
  • added split view
  • some cleanup
  • support rempl env
  • added env page
  • added bottom bar
  • receiving editing file path from the env
  • sending editing file modules info to the env

1.1.0 (March 16, 2017)

Plugin

  • fixed loader-utils version (fixes #9)

UI

Graph

  • replaces d3-graph by vivagraph
  • zooming graph with mouse/touchpad scrolling
  • changing graph position with drag and drop on the white field.
  • changing rendering speed by sliding speed slider
  • pause/resume graph rendering with space-key

1.0.1 (March 3, 2017)

Plugin

  • added onlyWatchMode option (#8)
  • bumped rempl version

1.0.0 (March 2, 2017)

Plugin

  • new module id
  • improved file handling
  • improved loader handling
  • supported different module types
  • now works only in watch-mode
  • added more webpack 1.x capability

UI

Core

  • replaced Source by Profile entity
  • improved entity loading: Module, Chunk, Asset
  • added ModuleLoader entity
  • improved File entity
  • all files now is File entity
  • split Issue entity to Warning and Error entities
  • removed useless code form utils
  • added open and close events to ui.Page class
  • added Hide 3rd party modules button (closes #5)
  • added some css prefixes for cross-browsing
  • many other simplifies and removing useless code

ui.Menu

  • universalize counter
  • added sub-menu
  • added dropdown-item
  • added checkbox-item

ui.Tooltip

  • markup improvements

Pages

Graph

  • supported and highlighted different module types
  • added module type to tooltip

File map

  • reworked path-building algorithm (fixed some bugs)

1.0.0-alpha5 (February 18, 2017)

  • add webpack2 support!
  • fix webpack version info
  • some cleanup in code

1.0.0-alpha4 (February 10, 2017)

  • layout rework
  • bump rempl version
  • fix loaders normalization bug

1.0.0-alpha3 (December 26, 2016)

  • layout rework
  • remove css bootstrap
  • add dependency graph
  • add modules type statistics
  • fix file map size recalc
  • remove useless css
  • components refactoring

1.0.0-alpha2 (December 22, 2016)

  • fix example building on windows

1.0.0-alpha1 (December 22, 2016)

  • rename package and repo to webpack-runtime-analyzer
  • add file map page to render file structure
  • add error and warning pages
  • exclude UI bundle from package (build on publish)
  • bump rempl

0.1.7 (December 16, 2016)

  • UI refactoring

0.1.5 (December 12, 2016)

  • fix installation logic
  • include bundle to package

0.1.4 (December 11, 2016)

  • fix readme
  • fix installation logic

0.1.3 (December 11, 2016)

  • bump rempl version
  • improve eslint config and fix warnings
  • simplify plugin usage
  • fix readme

0.1.2 (December 09, 2016)

  • improve example webpack config

0.1.1 (December 09, 2016)

  • fix remp require

0.1.0 (December 09, 2016)

Added

  • initial release