PLAY PODCASTS
Hasty Treat - Bundlers in 2020

Hasty Treat - Bundlers in 2020

In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix...

Syntax - Tasty Web Development Treats · Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

November 9, 202024m 37s

Audio is streamed directly from the publisher (traffic.megaphone.fm) as published in their RSS feed. Play Podcasts does not host this file. Rights-holders can request removal through the copyright & takedown page.

Original episode page

Show Notes

In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

02:39 - What is a bundler?

  • On the one hand, you can write HTML, CSS and JavaScript and open it in the browser
  • On the other hand, your build could be super complex

03:24 - What goes into configuring a bundler?

  • Templating language you use (Jsx, Pug, Vue, etc.)
  • JavaScript you write and compile to:
    • ES6/7/8/9
    • Typescript
    • CoffeeScript
  • Polyfills
  • Environmental variables
  • CSS loading
  • Image compression
  • Asset Chunking
  • Tree shaking

05:12 - Webpack

  • Hardest to learn, most used currently

07:38 - Rollup

  • Scott’s pick as best option for most features vs ease of use
  • Very powerful
  • Mmmr, tree shaking, plugins, esm

09:52 - Parcel

  • Scott’s simplicity winner pick
  • Easiest to get started with
  • It’s a bundler, but also a dev tool
    • Hot reload
    • Local server
  • Config is done via your package.json
  • Lots of plugins available

12:01 - Npm, Yarn and Yarn 2

  • It’s a dependency installer rather than a bundler

13:27 - Snowpack

  • Scott’s speed pick of the week
  • Uses ESM by default
  • Like Sonic after a triple shot of espresso
  • HRM
  • Perfect for dev builds, as well as production builds

15:51 - Isobuild / Meteor

  • Scott’s underdog pick of the litter

16:48 - Rome

  • Scott’s mystery pick of the week
  • New tool to do it all
  • Bundler, but also a linter

17:54 - Deno

  • Linter
  • Typescript formatter
  • Bundler (bundle into a single .js file)

20:44 - Let your tool take care of it

Links Tweet us your tasty treats!
← All episodes of Syntax - Tasty Web Development Treats