DEV Community

Syntax - Tasty Web Development Treats

Hasty Treat - Vite + Parcel 2

In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

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

03:08 - Next Gen Bundlers are here!

  • They are easy
  • They are fast
  • They are bundlers
  • They are code splitters
  • They are dev environments
  • HMR / Fast Refresh

07:13 - What do they use under the hood?

  • Parcel uses SWC (Rust)
  • Vite uses esbuild (Go)

10:29 - How do you use them?

  1. Usually point your app at an HTML file
  2. Your HTML file has an ES module
  3. It then goes and loads everything from there
  4. They have adaptors for different types of files
    • CSS
    • Images
    • Etc.
  • You can also point it directly at files

14:59 - Common use-cases

  • React / JSX
    • OOTB
  • Vue
  • Svelte
  • TypeScript
    • Both just work
  • Custom Babel config
    • Plugins for both
  • Sass
    • Vite: Detects it, asks to install it
    • Parcel: Detects it, installs it for you
  • PostCSS Processors

20:29 - Custom API

  • Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed.
  • Example use-case: a really nice WordPress dev package.

20:57 - Which one?

  • Both are really good!
  • Parcel 2 has been in dev for 2+ years - unsure when it will launch.
  • Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev.
  • Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.)
  • Life is good!
Links Tweet us your tasty treats!

Episode source