I Tried 200 Webpack Plugins for Performance (So You Don't Have To)

on YouTube ↗34m

" summary

A survey of about 200 webpack plugins focused on web performance, reviewing useful loaders and plugins for deep minification, image transformation, and library-specific hacks. It names npm’s large ecosystem (10,000 webpack-tagged packages) and highlights the most interesting plugins to improve build output and runtime performance, with practical recommendations for package.json.

AI-written summary · about

" chapters (13)

1. 0:00Introduction
2. 1:22JavaScript minifiers evolution
3. 3:15esbuild vs Terser
4. 5:23CSS optimization
5. 8:59Critical CSS rendering
6. 12:10CSS-in-JS optimization
7. 14:41Image compression
8. 16:51Service Worker & PWA
9. 19:25Library optimization
10. 22:42Bundle Analyzer
11. 24:26Webpack Stats & Hop analysis
12. 27:07Bundle size comparison
13. 28:40Q&A

" related talks

• 28mPerformance Feat. WebpackAtishay Baid · JSFoo 2019
• 40mBuilding a Platform: Webpack and the FutureSean Thomas Larkin · JSCamp 2018
• 19mPerformance Improvements with WebpackCaio Incau · Vue.js Summit 2018
• 21mEvolution of Web PerformanceDenis Artyuhovich · The Rolling Scopes Conference 2018
• 31mThe Future of Front-End PerformanceSia Karamalegos · Full Stack Fest 2018
• 50mWebApp performance tuning with WebpackAkshay Gupta, Anuj Singla · DevConf.CZ 2020
• 16mThe Evolution of Web PerformanceDenis Artyuhovich · OdessaJS 2018
• 58m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · Voxxed Days Bucharest 2018