vite打包快的原因：
冷啟動
1.esbuild構建依賴，go語言編寫多線程打包。
2.原生的esm方式提供源碼，瀏覽器分擔了一部分工作。

HMR熱更新
1.緩存機制，利用瀏覽器http頭部，源碼模塊請求根據304協商緩存和依賴模塊請求通過強緩存（cache-control: max-age=315360000, public ,immutable）
只是模塊本身被更新，不用重新構建。

強弱緩存都是服務器端配置。
強緩存，200 from cache：
Expires
cache-control: max-age=315360000, public ,immutable
弱緩存：
304
3.文件系統緩存：node_modules/.vite目錄
vite.config.js中設置緩存：cacheDir:‘./.cache’ //把上面默認的地址修改成這個
禁用緩存，瀏覽器network/disable cache

服務端寫入：
res.setHeader(‘max-age’: ‘3600 public’)
res.setHeader(etag: ‘5c20abbd-e2e8’)
res.setHeader(‘last-modified’: Mon, 24 Dec 2018 09:49:49 GMT)

---

幾款基于vue3和vite的開箱即用的中后臺管理模版
幾個強大的管理后臺模版，并聊聊他們的特點。

Vue vben admin

Vue Vben Admin 是一個免費開源的中后臺模版。使用了最新的 vue3, vite2, TypeScript 等主流技術開發，開箱即用的中后臺前端解決方案，也可用于學習參考。
特點
最新技術棧：使用 Vue3/vite2 等前沿技術
TypeScript: 應用程序級 JavaScript 的語言
主題：可配置的主題
國際化：內置完善的國際化方案
Mock 數據 內置 Mock 數據方案
權限 內置完善的動態路由權限生成方案
組件 二次封裝了多個常用的組件

ant-simple-pro

ant-simple-pro 是一款支持 vue3.0，react，angular，typescript 等多框架支持的中臺前端解決方案，ui 使用 antd 實現的，它使用了最新的前端技術棧，內置了 i18 國際化解決方案，動態路由，響應式設計，開箱即用，而且我們寫了很多支持 vue3 的插件和庫，它可以幫助你快速搭建企業級中后臺產品原型，不管你是 vue 開發者，還是 react 或者 angular，都能在這里找到你想要的版本。
前序準備
你需要在本地安裝 node 和 git，異步請求數據用axios，所有的異步接口均采用node+typescript+mysql+docker實現的，所以最好先了解如下知識：

vue
vue3.0的新語法，如setup,hooks等合成api
vue-cil,vue-router,vuex等全家桶
react
react基本語法，如hooks,class創建組件，函數式創建組件等
react全家桶要熟悉，如react-router-dom，create-react-app,react-transition-group等
react數據狀態庫，redux,redux-saga,reselect,react-redux等
react在typescript下的FC模式等
angular
angular的基本語法，如html模板，指令，組件等
angular的全家桶，如angular-cil,Rx等
typescript的基本語法

vue3-template-admin

vue3-template-admin 是一款基于 vue3 + vite + element plus 的后臺管理模版，它集成了我們業務開發的大部分功能，比如文本編輯器，全站搜索，權限管理，可視化圖表等。
使用到的插件/庫
eslint-plugin-vue eslint-plugin-vue
axios 強大的前端請求庫
fues.js fues.js 前端模糊搜索
echart echart 數據可視化
antv antv 螞蟻數據可視化
xlsx xlsx SheetJS
jszip jszip 優秀的前端壓縮庫
mockjs mockjs 模擬和交互數據
wangeditor wangeditor 富文本編輯器
fullcalendar fullcalendar 豐富的日歷插件

vue-admin-box

vue-admin-box 是一個免費并且開源的中后臺管理系統模板。使用最新版本的 vue3+vite+element-plus 開發而成，目的是為了解決通用型的業務中后臺系統復雜的配置。

功能特色
適合中后臺開發的路由配置、狀態管理機制（狀態默認支持本地存儲）、已封裝完善的axios及api管理機制
極方便擴展的主題配置功能，默認支持三種典型的中后臺風格
簡易配置的頁面緩存功能，只需配置noCache屬性，無需配置其他的任何屬性，如組件名稱，路由名稱等等很多框架需要配置的東西
典型增刪改查的三種業務表格，詳情請查看“頁面欄目”內的“業務表格”、“分類聯動表格”、“樹聯動表格”
支持緩存頁面刷新，目前了解的多數框架都不支持緩存頁面的刷新方便擴展的國際化解決方案，并提供了兩套非國際化的基礎模板和兩套國際化的基礎模板（ts版本/js版本）
手寫版本的各類自定義指令
已經過多個中后臺業務檢驗過的表格公用組件及彈窗公用組件，詳情請查看“頁面欄目”內的“業務表格”、“分類聯動表格”、“樹聯動表格”。

總結

以上是生活随笔為你收集整理的vite打包快几款基于vue3和vite的开箱即用的中后台管理模版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。