November 9th, 2020 × #webpack#rollup#parcel#snowpack#bundlers
Hasty Treat - Bundlers in 2020
Discussion on the most popular JavaScript bundlers available today and their key differences in features, complexity and use cases.
Wes Bos Host
Scott Tolinski Host
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
