J.A.R.V.I.S. (Just A Rather Very Intelligent System) will put in your browser all the relevant information you need from your webpack build whether in dev or in prod.
It is packed in features even it is still in beta, and a lot of what you see now will hopefully improve the way you look at webpack-dev-server or production build chunks and output.
It is of course hugely inspired by other webpack-dashboard and the core idea is not original, so thank you for Open Sourcers who showed me the road.
Original Features:
- Shows you what of your imported modules are ES Harmony modules and can be treeshakable.
- shows you how well your assets perform in 12 different connection types.
Tech Stack:
- Preact
- Sass
- Socket IO
- Express
Credits:
$ npm i -D webpack-jarvis
and then in your webpack config file:
const Jarvis = require('webpack-jarvis');
// the rest of your webpack configs
plugins: [
new Jarvis() // that's all you need!
]
Go to your browser and open:
localhost:1337
I am not entirely sure how many bugs you will catch, but what I know for sure the whole app, especially the client Preact app can be dramatically improved, JS & CSS and structure wise as the whole thing has been built in a rush in a very hacky way.
Any contribution can make a difference, even filing an issue, however if you are reading this and you still learning Web Dev and would like to contribute to OSS, I am happy to mentor you and refactor with you the client side app.
On the roadmap:
- Improve code quality, especially for the client side app.
- Bundle size analyzer like feature in the table
- Oppurtunities Section to suggest loaders, plugins, etc.. that can improve your build and bundle.
a super cool design will go here listing all contributors names + GitHub avatar