Next Generation Frontend Tooling
概述
最近Vite可能算是比較火的一個話題，尤其是隨著2.0版本的正式發布之后，各個公眾號都在頭部推薦，似乎是可以給前端童鞋開發效率帶來巨大變革的樣子，因此今天抽時間擼一遍看看，畢竟還是要緊跟時代潮流的，
Why Vite
官方檔案開頭第一部分就是介紹為什么要有Vite這個工具，其實這也是大家關心的點，前端構建編譯工具經過幾年的發展從最開始的gulp、grunt一直到現在的webpack，看起來現在已經是webpack一家獨大的局面了，為什么這個時候會重新開發一個新的工具呢，問題的答案當然就是舊有的工具存在這樣或那樣的問題才需要新工具的接入，那我們來看下webpack的問題都有哪些：
- 開發服務啟動速度太慢
- 熱更反應太慢
而Vite針對這兩個問題又是如何處理的呢？
-
Vite將應用里的模塊分為兩類：dependencies（原始碼的依賴） 和 source code（原始碼）
- dependencies在開發程序中不會被經常改變，動則成千上萬行的代碼庫每次運行也較為耗時
- source code則需要經常被改動，并且也不是純js格式
- Vite并不會對檔案進行打包，只是啟動靜態服務器，之后通過客戶端的請求來進行按需加載
webpack bundle:
Vite bundle:
-
Vite通過native ESM來對熱更新進行提速，只更新被修改檔案來進行熱更
大概就是這樣，看起來是在開發環境的時候有飛一般的體驗，生產環境下應該還是會build生成bundle，接下來來看下如何使用吧，
如何使用
瀏覽器支持：
- 開發環境：瀏覽器需支持import語法
- 生產環境：支持<script type=“module”>標簽，不支持的話可以加上官方插件@vitejs/plugin-legacy試下
Node版本支持：
Vite requires Node.js version >=12.0.0.
With NPM:
npm init @vitejs/app
With Yarn:
yarn create @vitejs/app
接著可以使用vite命令生成一個Vite+Vue的專案
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-vue-app -- --template vue
# yarn
yarn create @vitejs/app my-vue-app --template vue
Supported template presets include:
- vanilla
- vue
- vue-ts
- react
- react-ts
- preact
- preact-ts
- lit-element
- lit-element-ts
安裝成功之后，打開package.json檔案：
可以看到有三個可執行的命令，首先還是應該
npm i
// mac 下安裝有問題的話 可以試下 sudo npm i --unsafe-perm=true
來講依賴都安裝好
npm run dev
來體驗下所謂飛一般的速度
從請求檔案來看用的應該就是native ESM
總結
從上面分析來看，開發環境運行速度快是毋庸置疑的，主要是利用瀏覽器來幫助做了很多作業，本文只是簡單過了下Vite的流程，更多深入的功能還需要繼續探索，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/261869.html
標籤：其他