Useful tools for analyzing Webpack builds

Hi, My name is Andy Leverenz and I work as a product designer and developer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

====================

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, 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 it 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: Webpack vizualizer - https://github.com/chrisbateman/webpack-visualizer Webpack Bundle Analyzer - https://github.com/webpack-contrib/webpack-bundle-analyzer Bundle Phobia - https://bundlephobia.com/

====================

♥️ Sponsor me on GitHub https://github.com/sponsors/justalever

☕️ Keep me awake. Buy me a coffee https://www.buymeacoffee.com/webcrunch

📰 One-Click Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💻 Previously published at: https://web-crunch.com/posts/how-to-super-charge-your-new-rails-app-workflow

💎Latest course: HELLO RAILS https://hellorails.io

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://digest.web-crunch.com/ Twitter: https://twitter.com/webcrunchblog Github: https://github.com/justalever

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/products/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/products/ptt

💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it! https://hatchbox.io/?via=hellorails

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648 ... https://www.youtube.com/watch?v=aIM8TYc2t54