Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/erykpiast/webpack-stats-explorer

Explore your app bundle and compare sizes between builds
https://github.com/erykpiast/webpack-stats-explorer

bundle performance visualization webpack

Last synced: 5 days ago
JSON representation

Explore your app bundle and compare sizes between builds

Awesome Lists containing this project

README

        

webpack-stats-explorer
======================

[![Build Status](https://travis-ci.com/erykpiast/webpack-stats-explorer.svg?branch=master)](https://travis-ci.com/erykpiast/webpack-stats-explorer)
[![dependencies Status](https://david-dm.org/erykpiast/webpack-stats-explorer/status.svg)](https://david-dm.org/erykpiast/webpack-stats-explorer)
[![devDependencies Status](https://david-dm.org/erykpiast/webpack-stats-explorer/dev-status.svg)](https://david-dm.org/erykpiast/webpack-stats-explorer?type=dev)
[![Greenkeeper badge](https://badges.greenkeeper.io/erykpiast/webpack-stats-explorer.svg)](https://greenkeeper.io/)

Tool for exploring webpack stats and comparing them between builds. See [an introduction](https://dev.to/erykpiast/why-does-your-bundle-grow-a7n) and [a follow-up article at dev.to](https://dev.to/erykpiast/the-story-about-a-few-imports-40jm).

## Demo

https://erykpiast.github.io/webpack-stats-explorer/

## Development

### Run Project

```sh
npm install
npm start
# in another tab
npm run webpack
```
After you see the webpack compilation succeed (the `npm run webpack` step), open up `http://localhost:8080` in the browser.

### Build for Production

```sh
npm run build
npm run webpack:production
```

This will replace the development artifact `build/bundle.js` for an optimized version.