Vite 2.0 正式發(fā)布了!

@尤雨溪：https://zhuanlan.zhihu.com/p/351147547

概述

最近Vite可能算是比較火的一個話題，2.0版本的正式發(fā)布后，可以給前端童鞋開發(fā)效率帶來巨大變革，因此今天抽時間看看，畢竟還是要緊跟時代潮流的。

Why Vite

官方文檔開頭第一部分就是介紹為什么要有Vite這個工具，其實這也是大家關(guān)心的點，前端構(gòu)建編譯工具經(jīng)過幾年的發(fā)展從最開始的gulp、grunt一直到現(xiàn)在的webpack，看起來現(xiàn)在已經(jīng)是webpack一家獨大的局面了，為什么這個時候會重新開發(fā)一個新的工具呢，問題的答案當然就是舊有的工具存在這樣或那樣的問題才需要新工具的接入，那我們來看下webpack的問題都有哪些：

• 開發(fā)服務(wù)啟動速度太慢

• 熱更新反應(yīng)太慢

而Vite針對這兩個問題又是如何處理的呢？

• Vite將應(yīng)用里的模塊分為兩類：dependencies（源碼的依賴） 和 source code（源碼）

  • dependencies在開發(fā)過程中不會被經(jīng)常改變，動則成千上萬行的代碼庫每次運行也較為耗時

  • source code則需要經(jīng)常被改動，并且也不是純js格式

  • Vite并不會對文件進行打包，只是啟動靜態(tài)服務(wù)器，之后通過客戶端的請求來進行按需加載
    webpack bundle:
    
    Vite bundle:
    

• Vite通過native ESM來對熱更新進行提速。只更新被修改文件來進行熱更大概就是這樣，看起來是在開發(fā)環(huán)境的時候有飛一般的體驗，生產(chǎn)環(huán)境下應(yīng)該還是會build生成bundle，接下來來看下如何使用吧。

如何使用

瀏覽器支持：

• 開發(fā)環(huán)境：瀏覽器需支持import語法

• 生產(chǎn)環(huán)境：支持

  <kbd id="afajh"><form id="afajh"></form></kbd>

  <strong id="afajh"><dl id="afajh"></dl></strong>

<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>

<b id="afajh"><abbr id="afajh"></abbr></b>

<th id="afajh"><progress id="afajh"></progress></th>