Skip to content

v1.2.0

Choose a tag to compare

@smelukov smelukov released this 25 Mar 01:09
· 896 commits to master since this release

Whats new

Glad to introduce to you a big update. There are several important features:

New file map

Old and ugly file map was replaced by pretty cool FormTree library.

Double click will expose a clicked group, ESC-key will return the map to root.

Rempl server can start automatically

Before this release, you needed to install rempl server separately and start it manually before starting Webpack Runtime Analyzer. But now, you can pass mode: 'standalone' to the plugin options and rempl server will start automatically when Webpack Runtime Analyzer is started. After the server is started, you will see server URL in your console with webpack building output. Moreover, you can pass open: true to the plugin options and UI will open automatically in your default browser.

More useful module info

Now you can see module Occurrences, Retained and Exclusive properties.

Occurrences

Displays how many modules require this module.

Retained

Displays how many modules are required by this module and by all its dependencies (recursive).

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 how many modules are required only by this module and by all its dependencies (recursive).

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

Integration with Atom editor

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

Some code editors have an access to a web view (e.g. iframe) and there is a great opportunity to integrate Webpack Runtime Analyzer in these editors and 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 part of the bundle, then you can see some info about it in several places:

  • Environment page of the UI (contains all modules that retained by the editing file)
  • the status bar of the UI
  • the status bar of the Editor (two-way communication)

Environment page and status bar exist only when the UI is running within editor

How about other editors?

VS Code support is in plans...