Teams have heard this question countless times before from the mouths of our team leaders, product managers, clients, and users. And even perhaps countless times from ourselves. Yet even after having done our due diligence, creating an application and getting ready for it to deploy, all these people are telling us that our application doesn’t feel as fast as it should. How do we even start?

Come Webpack. An open-source module bundler that’s become an integral tool in this age of single-page web applications. With popular frameworks like React.js, Vue.js, and Angular continuing to dominate the web space, build tools such as Webpack are vital for development and deployment. Webpack takes a front seat in the build tool market due to its high configurability, development control, and out-of-the-box configuration. It also takes a front seat in the bundling world due to its integration with Create-React-App.

Webpack

But even after bundling applications, teams often just have to have faith that the code written and the application that has been build are fully optimized and efficient. Engineers beg for this to be true, because parsing through all of the files when the dreaded question “Can we make this faster?” is asked, requires a serious amount of time and energy — time and energy that could be spent building more, cool stuff. Developers don’t want to have to sacrifice anything in their codebase. No playing favorites and having to determine how useful every asset in our build may be. It’s all important or else it wouldn’t have been put in there!

Webpack already does an incredible job of fostering a streamlined development process, but what about production? Outside of minifying and uglifying your code, it’s difficult to see the power of Webpack in the production process. By design, this information that could make your development process better is obfuscated through a stats object that has to be manually captured by users. The stats object could be parsed; however, it can be a little unwieldy. Without an intimate knowledge of Webpack’s infrastructure and documentation, navigating through all of Webpack’s configuration can be tricky. If only there was a way to harness this power by finding an organized way of viewing this data?