November 13, 2020
•Last updated November 5, 2023
Useful tools for analyzing Webpack builds
This is a very quick walk-through of a few free tools you can use to analyze your Webpack build in real time.
Webpack is becoming an industry standard for web development asset bundling.
Under the complicated hood of the tool, us developers tend to want to know more about file size and dependencies as a project scales. Things can get out of hand if you're not too careful.
File size in particular is one I'm constantly aware of for the fact that is usually means your app/website will respond slower for end users if files reach a certain size. Tools exist to help you gain more background as to why the sizes increase.
Much of the inspiration for this walk-through comes from an article I found previously. Hat tip to Prateek Choudhary for the great article!
Gaining this knowledge will help you better understand ways to circumvent a large bundle size should you need to.
Tools used in this guide are:
Categories
Collection
Part of the JavaScript collection
Products and courses
-
Hello Hotwire
A course on Hotwire + Ruby on Rails.
-
Hello Rails
A course for newcomers to Ruby on Rails.
-
Rails UI
UI templates and components for Rails.