25 min
Hasty Treat - Vite + Parcel 2 Syntax - Tasty Web Development Treats
-
- Technology
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?
Usually point your app at an HTML file Your HTML file has an ES module It then goes and loads everything from there 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 Top Chef Master Chef Snowpack Webpack Parcel SWC Vite esbuild Rollup SvelteKit Strapi 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
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?
Usually point your app at an HTML file Your HTML file has an ES module It then goes and loads everything from there 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 Top Chef Master Chef Snowpack Webpack Parcel SWC Vite esbuild Rollup SvelteKit Strapi 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
25 min