Vite 是一種新型前端構建工具，能夠顯著提升前端開發體驗。它主要由兩部分組成：
- 一個開發服務器
- 一套構建指令
Vite 提供了一套原生 ESM 的 HMR API。 具有 HMR 功能的框架可以利用該 API 提供即時、準確的更新，而無需重新加載頁面或清除應用程序狀態。Vite 內置了 HMR 到 Vue.js 單文件組件（SFC）和 React Fast Refresh 中。
文章推薦
遷移 Vue v2.x 版本到 Vite // jsliang
本次「遷移 Vue v2.x 項目到 Vite」將分為 2 個部分：
- 以一個簡單 Demo，進行 Vite 快速入手（同時也是補充完善實例項目未解決的問題）
- 對實例項目遷移，對比 Vue CLI 和 Vite，以及 Vite 構建中碰到的問題。
本文更傾向於隨手可查工具文，就好比之前寫過的 Webpack 4 文章一樣，它很快會石沉大海，但是我們將碰到的問題都反饋出來後，會讓後面的人少跑彎路，這是很棒的事情。
vite3 + vue3如何封裝健壯的【SVG插件】? // 代碼詩人_
概念： SVG是一種基於XML的矢量圖形格式，SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體,用於在Web和其他環境中顯示各種圖形；它允許我們編寫可縮放的二維圖形，並可通過CSS或JavaScript進行操作。它由萬維網聯盟制定，是一個開放標準。
優點： 可伸縮性，響應性，交互性，可編程性，體積小性能高。
因為SVG是基於矢量的，所有在放大圖形時不會出現任何降低或丟失保真度的情況。它只是重新繪製以適應更大的尺寸，這使得它非常適合多語境場景，例如響應式Web設計。而且性能也極佳，與柵格圖形（如GIF，JPG和PNG）相比，SVG圖形通常是較小的文件。
瀏覽器支持度： svg對市面上常見的瀏覽器已經有很好的支持度
為什麼 qiankun 不能和 vite 一起使用？ // winter
- vite2 不支持 runtime publicPath，這項能力在 webpack 中由內置變量__webpack_public_path__提供，runtime publicPath是 qiankun 加載子應用的核心 (由 import-html-entry 模塊提供) ，用於預加載及引入異步腳本
- esm 會使 qiankun 的 js 沙箱失效，qiankun 內部的 js 沙箱使用將 window 對象進行了代理，以防止全局作用域被污染，但 esm 模塊始終具有自己獨立的頂級作用域，也就是説它訪問到的 window 是全局作用域下的，而不是 qiankun 沙箱中提供的代理 window，雖然可以通過在生產環境打包為 umd 格式的方式來避免使用 esm，但有些本末倒置了
React 為什麼不將 Vite 作為默認推薦？ // 卡頌
在React文檔中，對於構建新的React應用，首推的方式是CRA（create-react-app）。
CRA推出於2016年，彼時還沒有成體系的React腳手架工具供大家使用，再加上這是官方工具，一經推出就受到了歡迎。截止當前，CRA倉庫已經收穫快10wstar。
但是，隨着時間的推移，出現了很多優秀的替代品，比如parcel、vite提供的React模版。
而CRA本身的進步速度卻在放緩，其上一次提交要追溯到去年9月8日：
加餐
【Vite 實踐】Vite 庫模式能滿足你嗎？或許你需要統一構建 // Samon
Vite 秉承了開箱即用，簡化配置的思路，確實顯著提升了前端開發體驗。
但是在類庫模式的構建上卻有所欠缺，只能處理單個輸入和單輸入出的情況，構建場景單一，Vite 社區上目前也沒有可直接使用的工具，所以才有了開發一個統一構建插件的想法。
目前 vite-plugin-build 插件已可以直接使用，也錄入了 Vite 官方 awesome-vite，希望也剛好能滿足一些人的需要。
如何快速從零開始搭建一個前端項目 // chlorine
單元測試是項目開發中比較重要的一部分，通過單元測試可以一定程度上保障項目的代碼質量以及邏輯的完整性，對於 vite 創建的項目，我們選擇與之匹配度比較高的測試框架 vitest 來編寫測試用例，安裝如下：
pnpm create vitest jsdom -D在 vite.config.ts 中配置 vitest，選擇 js-dom 環境，這裏在頂部添加 vitest 的類型聲明引入後，即可在 vitest 中共享 vite 的 plugins 等配置
問答推薦
- vite 靜態資源過大，導致啓動時間太長，如何解決？
- vite 項目啓動失敗,404?
- vite 打包 react 後打開頁面是空白的?
- vite+vue3+ts 使用 ip-address 這個組件的時候報 require 出錯？
- Vue 3.0 + vite + axios 跨域問題如何解決？
- vite4 動態導入路由返回為定義？
- vite 中間件模式啓用 host 代理，頁面自動無限刷新，該怎麼配置?
- 使用 Vite 創建的項目，是否就不需要
css-loader了？ - vite 為什麼遍歷引用靜態資源會找不到？
- vite 不支持 node 環境?
# SegmentFault 技術週刊 #
「技術週刊」是社區特別推出的技術內容系列，一週一主題。
每週二更新，歡迎「關注」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。
如有問題可以添加小姐姐微信~
