Notes from a Vite talk

Matt Steele is awesome. He gave a talk on Vite at the January 2023 NebraskaJS Meetup. Here are my notes from the talk.

Vite

Vite is a build tool for modern web development. It's a dev server that serves your code via native ES modules during development. It uses Rollup under the hood to bundle for production.

Vite is fast. It's fast because it uses native ES modules. It's fast because it uses Rollup. It's fast because it uses esbuild to bundle for production.

Vite is opinionated. It's opinionated about how you write your code. It's opinionated about how you structure your code. It's opinionated about how you build your code.

Talk notes

  1. Matt points out that build tools are a pain point and uses some memes to illustrate the pain.
  2. There are similarities on the java side as well.
  3. Why do you build JavaScript? It runs using an interpreter. Why do we have the build tool chains? Matt calls for ideas....
    1. Tree shaking is one reason
    2. Bundling is another reason
    3. Compiling the typescript (transpile) is another reason
    4. Code splitting -- seperating the project so that only the code that is needed is loaded.
    5. Minifying the code
    6. The require() function is another reason -- it's not built into browsers. Made popular by node.js. It's a way to load modules.
  4. Webpack is a module bundler is been around for a while. e.g. create react app uses webpack. Angular cli does as well.
  5. What if we used a browser native way to load modules? That's what Vite does. It uses native ES modules. It uses Rollup to bundle for production.
  6. Vite is fast. It's fast because it uses native ES modules. It's fast because it uses Rollup. It's fast because it uses esbuild to bundle for production.
  7. Vite is opinionated. It's opinionated about how you write your code. It's opinionated about how you structure your code. It's opinionated about how you build your code.
  8. Vite is a dev server. It's a dev server that serves your code via native ES modules during development. It uses Rollup under the hood to bundle for production.
  9. Vite was created by Evan You
  10. you can use vite with angular, 11ty, react, vue, svelte, and more. It has typescript support out of the box.
  11. Vite has a great community. 11ty and angular support is community driven.

Very cool project

  1. Used PartyTown to put the analytics in a web worker thread.
  2. vite analytics provides a quadtree view of the dependencies. It's a great way to see what's going on.
  3. https://www.npmjs.com/package/@turf/turf
  4. https://www.npmjs.com/package/maplibre-gl
  5. Use import as a function to load a module. e.g. const maplibregl = await import('maplibre-gl')

Q&A

  1. Is there PWA support? A: There's a plugin for that: https://vite-pwa-org.netlify.app/

Similar things

  1. Parcel
  2. Snowpack has been depricated in favor of Vite.

Meta Frameworks -- tools that use Vite

  1. Analog -- Angular
  2. Astro -- Can use vue, svelte, react, or vanilla js --- a static site generator

Editor support

  1. Volar -- Vue
  2. Vite -- Vite
  3. Vite Svelte -- Svelte
  4. Vite React -- React
  5. Vite PWA -- PWA
  6. Vim support -- is there too.

Native Tools

Uses some of the more modern native tools -- things built from rust and go. e.g. esbuild is written in go. swc is written in rust. Tradeoff between type erasure vs. type checking.

Misc

  1. JSParty deep dive on Vite is a very nice episode.

Some day maybe

Things I want to try: https://medium.com/@hiepxanh/angular-vite-example-is-crazy-fast-3ee4d730020c

Afterwards, things I found on google

  1. https://www.youtube.com/@BrandonRobertsDev who has written about Vite with Angular and is the creator of AnalogJS. I hope this talk makes it to YouTube.
  2. https://github.com/hiepxanh/angular-vite-example

Tags: programming, JavaScript, Vite

← Back home