Hasty Treat - Bundlers in 2020

Syntax - Tasty Web Development Treats

• Episode: Hasty Treat - Bundlers in 2020
• Website: Syntax - Tasty Web Development Treats
• Feed URL: https://feed.syntax.fm/rss
• Duration: 00:24:35
• Published: 2020-11-09 15:00

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

• Gatsby (webpack)
• Next.js (webpack)
• Gridsome
• Create React App
• Vite (Rollup)
• Broccoli.js

Links

• Babel
• Gulp
• Syntax 212: Pika Pkg
• Fred Schott
• Pika
• Rust
• Go
• Software Engineering Daily: Deno and TypeScript with Elio Rivero

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets