A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 299: Hasty Treat - Bundlers in 2020

0:00

LOUDNESS

Nov 9th, 2020

Hasty Treat - Bundlers in 2020

👇 Download Show✏️ Edit 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

Tweet us your tasty treats!