webpack-runtime-analyzer

webpack-runtime-analyzer

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

Watch a video-demo

Install

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

Usage

Add plugin to your webpack config:

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

// ...

plugins.push(new RuntimeAnalyzerPlugin());

Start rempl server:

rempl

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

Try the example to see how it works:

cd example
npm i
npm run dev

Then open rempl server URL in your browser (http://localhost:8177 by default)

Make sure that your rempl server is up.

Plugin config

If you don't want to use default plugin config, then you can specify your own config:

new RuntimeAnalyzerPlugin({
    ui: {
        script: fs.readFileSync('/path/to/ui/bundle.js', 'utf-8'), // packed UI bundle (js + html + css + etc...)
        url: 'http://localhost:8080' // or URL to UI
    }
});

In case ui.url and ui.script are specified then ui.url will be used.

Key features

Dashboard

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

Dependency graph

Take a look at the dependencies of the modules.

File size map

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

Realtime analyzing

Analyzing process is performing in realtime.

UI customization

The UI built on basis.js framework.

• Make changes in src/ui
• Run npm run build to build the UI bundle

In the future you will may host and customize the UI at web server without building a bundle, but rempl does not support this feature at this moment.

License

MIT