1 of 33

How Vite Came to Be

Evan You

ViteConf 2022

2 of 33

“Frontend Tooling”

3 of 33

<script src="app.js"></script>

4 of 33

<script src="app.js"></script>

<script src="module-a.js"></script>

<script src="module-b.js"></script>

5 of 33

;(function() {

var localVar = 1

​

window.App.foo = {

// ...

}

})()

IIFE (Immediately-Invoked Function Expression)

6 of 33

AMD / RequireJS

7 of 33

Node.js -> CommonJS

8 of 33

browserify / webpack

9 of 33

Vue Single-File Components (SFCs)

<script>

export default {

data() {

return {

count: 0

}

}

}

</script>

​

<template>

<button @click="count++">Count is: {{ count }}</button>

</template>

​

<style scoped>

button {

font-weight: bold;

}

</style>

10 of 33

browserify -> vueify

webpack -> vue-loader

11 of 33

Bundlers were too low-level for end users

12 of 33

vue-cli

  • First release in 2015
  • webpack-based
  • HMR (Hot Module Replacement)
  • Opinionated / pre-configured

13 of 33

2015: ES Modules

JavaScript finally gets a standardized module system

14 of 33

Rollup

15 of 33

2017: Native ESM in the browser

Familiar bundle-less development

but with modules!

16 of 33

What if Native ESM had a transform API?

…but people still want to use SFC, JSX, PostCSS, etc…

17 of 33

@vue/dev-server

March 2019

Transforms imports to Vue SFCs on the fly

​

Unresolved questions:

  • npm dependencies
  • Hot Module Replacement (HMR)

18 of 33

The tweet that started it all…

19 of 33

Vite 0.1

Apr 21, 2020

  • HMR over native ESM
  • POC status
  • Hard-coded logic for Vue only

20 of 33

0.2

Apr 21, 2020

  • Figuring out server structure
  • Koa middlewares as transform pipeline
    • Inspired by @web/dev-server (es-dev-server back then)

21 of 33

0.4

Apr 23, 2020

  • HMR propagation for plain JS
  • Dependency handling compat w/ Snowpack v1 (now esinstall)

22 of 33

0.5

Apr 24, 2020

  • vite build!

23 of 33

Built in parallel:

VitePress

  • Started Apr 27, 2020
  • SSG built on top of Vite
  • Powering Vite’s own docs
  • Serves as a way to validate Vite’s programmatic API design

24 of 33

The grind to 1.0

Aiming for feature parity with vue-cli

while fixing all kinds of bugs

Apr ~ Nov 2020 / 91 releases

25 of 33

…but Vite 1.0 never landed.

26 of 33

As I worked towards 1.0…�

I realized Vite can be much more than just a replacement of vue-cli.

27 of 33

1. Framework-agnostic,

minimal-config build tool

for end users

28 of 33

2. The shared tooling layer

for framework authors

29 of 33

Vite 2 was a complete rewrite

Started in this commit on Dec 7, 2020

  • Going framework agnostic�
  • Universal Rollup-compatible plugin API (inspired by WMR)�
  • New SSR runtime (inspired by SvelteKit / Snowpack)�
  • Switched to esbuild-powered dependency pre-bundling

30 of 33

Vite 2.0

Feb 16th 2021

31 of 33

Forming a Team

Discussion Mar 19, 2021

32 of 33

Building an Ecosystem

And a Community

33 of 33

Thank you!