本文原創：lideguangjavascript

某乎有一個問題「2021前端會有什麼新的變化？」，其中 Vue 的做者尤雨溪給出的答案：「會有不少人拋棄 Webpack 開始用 Vite」。下面來看一下爲什要拋棄 Webpack、使用 Vite。css

Vite

Vite 是一種新型的前端構建工具，最初是配合 Vue 3.0 使用，後面適配了常見的前端項目，提供了 Vue、react、preact 等模板。官網首頁列舉了 Vite 的特性：快速的啓動、熱重載、支持常見資源類型、支持多頁/ 類庫開發、通用、類型化API。html

在進入 Vite 實操前，咱們來看下被 Vite 革命的 Webpack。前端

Webpack 對比 Vite

Webpack 一直以來和前端工程化緊密聯繫在一塊兒，優化前端開發體驗。這張圖是描述 Webpack 功能最直觀的一張圖，從入口進入，尋找各類依賴資源，經由 Webpack 打包，生成靜態資源提供網頁展現。vue

可是使用 Webpack 有一個繞不過去的問題，就是伴隨着項目體積增大、代碼增加而來的性能問題：項目啓動的速度、加載的性能、打包的速度、熱重載的及時性等。java

以 Webpack 爲表明的模塊打包工具，開發時啓動本地服務器會從項目入口依次抓取依賴關係，對整個項目文件進行打包，這就形成了啓動服務慢；開發過程當中也 HMR 熱更新也存在一樣問題，Webpack 的熱更新服務會以當前修改文件爲入口，從新 build，全部依賴也會被從新加載一次，致使熱更新也就快不起來。node

Vite 讓瀏覽器接管了打包程序的部分工做，僅啓動一臺靜態資源服務器。資源在這裏被分爲了兩類：react

依賴
- 依賴爲外部組件庫，多爲純js，開發中不須要變更；
- 這部分使用 esbuild 進行預編譯，將組件庫的代碼從本來的 commonjs 或者 umd 轉換爲 esm；
源碼
- 項目代碼等；
- 加載時處理；

Vite 服務只須要在瀏覽器請求源碼時，進行轉換並按需提供源碼，只有當前頁面依賴使用的資源纔會處理，實現了真按需加載；一樣在熱更新時，也僅編譯變動部分的文件，同時結合瀏覽器的緩存機制，使用協商緩存，進一步提高重載的速度；git

經過這種設計思路，Vite 解決了打包工具啓動慢、更新慢的問題；github

Vite Demo

下面咱們經過一個例子來感覺下 Vite 的速度，按照下方的命令提示，咱們可使用 Vite 搭建一個 vue 3.0 的項目

提示：這裏 node 版本要求 >= 12.0.0

啓動項目後，控制檯能夠看到兩個 warn :

這裏解釋一下：script setup 是 vue 在 RFC 裏提交的一份 REF 語法糖的提案，主要做用是：

自動暴露頂級變量，減小代碼冗餘度
經過 ref：語法讓 ref 更高效

這個提案也在社區引發來不小的爭議，看下代碼中，哪裏用到了 setup，這兩個組件中使用了，將這裏的變量暴露出來，使得 template 能夠直接使用，若是你們存在潔癖的話，能夠找到代碼中的 script setup 進行改寫，避免warn 提示。

這樣咱們就建立了一個 vue 3 的項目，經過這部分模板生成的代碼，咱們也能夠看到一些 vue 3 不一樣於 vue2 的部分特性:

├── index.html
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── Vite.config.js
複製代碼

先從入口文件看：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

複製代碼

vue 3 再也不使用 new vue。在以前版本中，使用 new vue 全局會共享一個全局配置，好比作測試、或者三方監控引入時，很容易相互污染覆蓋，且沒法直接還原。vue 3 增長了 createAPP 這個 api，調用 createApp 會返回一個應用實例，全局範圍影響 Vue 行爲的 api 都會遷移到應用實例中，避免污染覆蓋。固然，若是須要多實例共享的全局配置，能夠經過工廠函數包裝的形式來實現：

import { createApp } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const createMyApp = options => {
  const app = createApp(options)
  app.directive('focus' /* ... */)

  return app
}

createMyApp(Foo).mount('#foo')
createMyApp(Bar).mount('#bar')
複製代碼

再看HelloWorld.vue:

// src/components/HelloWorld.vue
<template>
  <h1>{{ msg }}</h1>

  <p>
    <a href="https://Vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button @click="state.count++">count is: {{ state.count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>
複製代碼

組件模板中容許組件有多個根元素，同時 $attrs 包含 class 和 style，2.0 中 class style 不屬於$ attrs，會應用到組件跟元素，如今能夠容許加到任意元素位置，邏輯更加清晰。

支持 JSON、SASS、TS、組件庫

Vite 支持 json，並在內部配置了CSS預處理器。對於 JSON 文件可直接引入，css 預處理器只須要安裝對應的loader文件，便可。

// JSON 支持
// import the entire object
import json from './example.json'
// import a root field as named exports - helps with treeshaking!
import { field } from './example.json'
複製代碼

# sass 支持
# Vite 內置了對 css 預處理器的支持
npm install sass --save-dev
複製代碼

Vite 默認支持了 ts，並且 vue 3 不一樣於 vue 2 中依靠 flow 進行類型管理，使用了 ts 進行開發，對 ts 的支持更優雅；

其次看下如何支持 UI 庫的使用，vue 在取消 new Vue 後，有了應用實例，UI庫的掛載也是要掛載到應用實例上。因爲 use 全局 API 在 Vue 3 中再也不使用，此方法將中止工做並中止調用 Vue.use() 如今將觸發警告。因而，開發者必須在應用程序實例上顯式指定使用此插件：

import { createApp } from 'vue'

import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)

app.mount('#app')

複製代碼

最後

Vite 做爲工具服務裏的一名新同窗，瀏覽器是否支持原生的 ESM 動態導入、崩潰、周邊待完善等問題也確實存在。不過在體驗下來，Vite 給人呢的感受是速度真的很快，規避不少複雜配置，真正實現了開箱即用，同時可以和 Roolup 共享插件接口，後續的生態會變得很豐富，快收下尤大的這份禮物吧。

參考：

Vue3 官網文檔：v3.cn.vuejs.org/guide/migra…introduction.html

Vite 2 官網：cn.Vitejs.dev/

Vite 2 release note ：zhuanlan.zhihu.com/p/351147547

技術胖（Vite 1.x）：jspang.com/detailed?id…

楊村長（備戰2021：Vite2項目最佳實踐）： juejin.cn/post/692491…

Vite2插件開發指南：zhuanlan.zhihu.com/p/351529474