1 of 11

Vue’s Road to Vite

Haoqun Jiang / 2022

2 of 11

About Me

Haoqun JIANG | 蒋豪群

Vue / Vite Core Team Member

Full-time Open-Source Developer

​

@sodatea

@haoqunjiang

3 of 11

Creating a Vue Project (the 2022 way)

npm create vue@3

npm create vite@latest

4 of 11

Today’s Topic

  • Why Are We Switching?

​

  • How Does the Ecosystem Change in the Vite Era

​

  • Future Insights

5 of 11

Turning Away from Webpack

  • Speed
    • Vite is fast by default
    • HMR time complexity: O(1) v.s. O(N)

​

  • Simplicity
    • Easier user configuration
    • Easier to extend (loader + plugin v.s. plugin-only)

​

  • Stability: Vite is mature enough

6 of 11

A Small, Yet Sufficient Core

  • Ready-for-use with enough built-in integrations
    • Bundler
    • Dev server
    • Static assets handling
    • Lib mode, SSR, …

​

  • A rich ecosystem for sophisticated use cases
    • Plugins (legacy, etc.)
    • Third-party tools (vitest, etc.)

7 of 11

A Different Approach

  • No burden of history, no anti-patterns
    • No mixed ESM-CJS code
    • Force explicit .vue extension

​

  • Predictable release cadence
    • At least 1 major release per year, in line with Node.js
    • Ease of migration guaranteed by vite-ecosystem-ci

8 of 11

Decouple Complex Features

  • Vue CLI Generators
    • Dedicated scaffolding tools
      • create-vue
      • @vue/create-eslint-config
      • degit + templates (e.g. vitesse)

​

  • Vue CLI service plugins
    • Plain Vite plugins would suffice

9 of 11

Decouple Complex Features

  • @vue/cli-plugin-eslint��npm create @vue/eslint-config

​

​

  • @vue/cli-plugin-typescript��Transpile .ts by default + vue-tsc for type-checking

​

​

  • Run in worker thread: vite-plugin-checker

10 of 11

Decouple Complex Features

  • Unit Testing
    • @vue/cli-plugin-unit-jest
      • Doesn’t share configurations with the bundler
    • @vue/cli-plugin-unit-mocha
      • Tedious to configure to make it work with bundlers
    • vitest
      • Fast
      • Derives from the Vite configuration
      • Well-maintained by people familiar with Vite

11 of 11

Looking Into the Future

  • De-dupe the vue package

​

​

  • Better CommonJS interop

​

​

  • Even faster build