此文章先從如何使用再到vite與vue3.0基礎特性
背景：項目技術選型傾向的原因，要嘗試vue3.0，所以使用了“配套的vite”作為前端構建工具
創建web工程
yarn create @vitejs/app my-vue-app --template vue-ts
ps:node版本 >=12.0.0
目錄結構
這里的shims-vue.d.ts文件是告訴ts如何識別vue文件
觀察下package.json文件，看看有哪些依賴
安裝依賴
cnpm install
啟動項目
npm run dev
啟動成功之后效果
用法很簡單，主要針對vite有哪些比webpack更強大得特性
核心：boundless
了解boundless之前先了解下webpack得構建模式
webpack
webpack通過入口文件，遍歷整個依賴關系圖，最終根據入口文件生成目標boundle.js，當項目體積越來越大得時候。整個構建過程變得越來越慢，通過一些方法可以提升這部分得效率，比如多線程構建，緩存，提取公共文件（每次構建避免構建這部分內容），利用這些方式可以加速構建速度，但也都有上限，當我們利用hot dev server熱更新得時候，webpack得模式也是先構建然后再進行熱更新。那么如何更優雅得解決這類問題，boundless解決方案能帶來更好得開發體驗
boundless解決方案直接跳過依賴構建得過程，使得瀏覽器直接加載目標文件，少了構建過程，解決了webpack在提升構建得整個過程中浪費得資源
boundless效果圖
boundless解決方案帶來了好處：
1提升了構建過程，因為不需要構建了
2提升了項目啟動時間，因為不需要構建了
3提升了文件編譯速度，針對性得編譯目標修改文件，提升了熱更新的效率
4更高效的開發，代碼跟蹤，不在依賴source-map
具體得好處我們可以看下實際應用得體現
webpack
修改文件發生哪些變化（HMR）
可以看到監聽到文件變化后，仍然是先構建，然后瀏覽器在加載boundle文件
vite (boundless方案)
修改文件觀察變化
只重新編譯了修改的目標文件
瀏覽器也只重新加載了目標文件。
到這里可以看到了boundless方案直觀上的優勢。采用這種方案的還有snowpack。
boundless如何實現
1.如今模塊化大行其道，ES module成了主要趨勢，所以我們可以基於ES module 做動態引入
<script type='module'> import d from '/demo.js' console.log(d) // 123 </script>
2.利用systemjs-importmap+system.import
<script type="systemjs-importmap"> { "imports": { "COMMON": "http://localhost:3000/manifest.json" } } </script>
System.import(COMMON)
3 importmap
{ "imports": { "demo": "./demo.js", } }
import a from 'demo'
熱更新只要本地啟動dersever，本地文件相對路徑生成映射的map.json文件，然后通過esmodule方式import目標文件就可以實現。具體怎么做，如何鎖定更改文件，只load更改文件，挺難我不會。等我研究明白了再寫。
optimize
這個概念在webpack4.0以后也是一個核心優化思想，起主要目的就是抽離公共文件，進而通過瀏覽器自帶緩存提升頁面體驗，但是在vite中是干啥用的捏？
vite通過optimize自動將package.json文件中的depenencies借助rollup打包成ES model（rollup是打包工具，而且自帶按需加載功能，最好了解一下rollup，官方文檔也特意說明了vite對rollup的支持，Vite plugins extends Rollup's well-designed plugin interface with a few extra vite-specific option）
大致流程：vite(optimize) => package.json(depenencies)=>rollup打包=>寫入.vue_opt_cache
打包也是有先來后到的，提前打包帶來的好處除了能夠提升頁面的加載速度，借助 @rollup/plugin-commonjs 我們能夠將 commonjs 的外部依賴打包為 ESModule 的形式引入，進一步擴大 Bundleless 的適用范圍。
擴展功能：
vite專門提供了一個針對rollup插件的容器，同樣也支持一些特定的鈎子當這些鈎子啟用的時候會自動忽略rollup鈎子
vite特定鈎子
config
在解析配置之前設置一些plugin來修改vite的配置，或者獲獲取構建過程中的一些信息，其實就是webpack的自定義plugin，這個過程中拿到compiler跟compiltion信息在做特性修改
configResolved
解析之后vite之后做修改，與config類似，只是針對的vite構建時間點不同進行取舍
configureServer
用於配置開發服務器的鈎子。主要是自定義中間件，中間件可以在vite自身內部中間件中間運行，也可以在vite中間件結束運行。
transformIndexHtml
轉換html專用的鈎子，針對輸出的html做特定修改。
handleHotUpdate
自定義熱更新的處理規則
本菜雞目前大概了解這些，到這里會有疑問，既然沒有構建過程，怎么部署？不妨執行下vite build看下效果，其實boundless只是針對提高開發的體驗，真正部署的時候還是遵循整體構建流程~
初步了解vite的boundless，待詳細研究過在做補充，下一篇總結vue3.0特性以及結合ts。