Vite 是一種前端構建工具，能夠顯著提升前端開發體驗。它主要由兩部分組成：
- 一個開發服務器，它基於 原生 ES 模塊 提供了 豐富的內建功能，如速度快到驚人的 模塊熱更新（HMR）。
- 一套構建指令，它使用 Rollup 打包你的代碼，並且它是預配置的，可輸出用於生產環境的高度優化過的靜態資源。
Vite 意在提供開箱即用的配置，同時它的 插件 API 和 JavaScript API 帶來了高度的可擴展性，並有完整的類型支持。
本期技術週刊一起了解下這個前端構建工具 Vite ，歡迎大家閲讀 ～
文章推薦
以下是專欄板塊關於 Vite 的相關文章
《【Vite 實踐】Vite 庫模式能滿足你嗎？或許你需要統一構建》作者：Samon
因為沒有特別好的叫法，本人暫且把這叫做統一構建，本人把統一構建歸納為如下構建：
Bundle 構建
即 Vite（也是 Rollup）的庫打包模式，單輸入文件，單輸出 bundle 文件，如果沒有設置外部依賴（external）所有涉及的依賴包都會打包到一個 bundle 文件中。
優點：支持 umd 格式，瀏覽器中可作為外部依賴，不受業務代碼 bundle 影響，可利用瀏覽器緩存機制，提高加載性能。
缺點：不支持 Tree Shaking 沒有使用到的代碼也會加載進來，由於打包到一個 bundle 文件，本地源碼可讀性差。
《【使用Vite構建工具快速創建Vue項目（Vue3.0項目開發）》作者：TANKING
本文將進行該項目的開發和發佈。目前的Vue版本是3.0.4，通過Vite的打包，就可以部署到服務器進行發佈。
組件化開發
vue項目的優點就是組件化開發，將每個功能、或者是每個頁面、容器分成各個組件，一方面是便於維護，另一方面是多人開發的時候也是可以提高效率。可以增加代碼的複用性、可維護性和可測試性。提高開發效率，方便重複使用，簡化調試步驟，提升整個項目的可維護性，便於協同開發，是高內聚、低耦合代碼的實踐。
代碼目錄中的 components 目錄就是組件的目錄，在這裏可以根據自己的項目去創建各個組件，直接在組件裏面寫html代碼、以及調用vue的api去實現很多功能，例如axios網絡請求，同時，組件內也可以寫css樣式。
《Vite 多頁面應用配置&使用 vite-plugin-html 向 html 模板注入數據或標籤》作者：老貓抽旱煙
在開發過程中，簡單地導航或鏈接到 /nested/ - 將會按預期工作，與正常的靜態文件服務器表現一致。
也就是説，如果你的文件夾有如下層級：
{
src: {
pages: {
demo1: {
App.vue
main.ts
},
demo2: {
App.vue
main.ts
},
demo1.html
demo2.html
}
}
}那麼通過 vite 的開發服務器訪問你的頁面，需要訪問localhost:3000/src/pages/demo1.html#/index 這樣的鏈接，打包後index.html 也會出現在 dist/src/pages 文件夾下，很不方便。
《vite — 超快且方便的編譯工具》作者：一顆冰淇淋
我們編寫的代碼，比如 ES6、 TypeScript、react 等是不能被瀏覽器直接識別的，需要通過 webpack 、rollup 這樣的構建工具來對代碼進行轉換、編譯。
但隨着項目越來越大，需要處理的資源越來越多，構建工具也需要很長的時間才能開啓服務，因此產生了新型的前端構建工具 Vite ，可以提升編譯速度和減少構建配置。
《實現一個打包時將 CSS 注入到 JS 的 Vite 插件》作者：Name6
Vite 在2.0版本提供了Library Mode（庫模式），讓開發者可以使用Vite來構建自己的庫以發佈使用。正好我準備封裝一個React組件並將其發佈為npm包以供日後方便使用，同時之前也體驗到了使用Vite帶來的快速體驗，於是便使用Vite進行開發。
《使用 vite 腳手架創建 vue3 項目配置 eslint+stylelint》作者：曹飛龍
使用vite的腳手架創建一個項目
yarn create vite安裝Eslint包
cd vite-project yarn add yarn add eslint -D配置eslint
npx eslint --init
問題推薦
關於 Vite 的問題，歡迎正在閲讀的小夥伴們一起來解決！
- 如何讓 Vite 熱更新,而不是直接刷新整個頁面?
- Vite 的環境變量文件能否替換為 json 或 js？
- vite+vue3 如何配置可以讓瀏覽器直接訪問 public 下面的文件？
- 用 vite 打包 vue3 配置重載成功，但瀏覽器不能自動刷新？
- vite-plugin-imp 使用之後 console.log 行數錯誤?
- vite 使用函數生成 proxy 配置，dev 模式下正常，打包後卻不生效？
- vite 打包，如何配置讓所有瀏覽器使用兼容版的 chunk？
# SegmentFault 技術週刊 #
「技術週刊」是社區特別推出的技術內容系列，一週一主題。
每週二更新，歡迎「關注」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。
如有問題可以添加小姐姐微信~
