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

HMR熱更新
1.緩存機(jī)制，利用瀏覽器http頭部，源碼模塊請(qǐng)求根據(jù)304協(xié)商緩存和依賴模塊請(qǐng)求通過強(qiáng)緩存（cache-control: max-age=315360000, public ,immutable）
只是模塊本身被更新，不用重新構(gòu)建。

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

服務(wù)端寫入：
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的開箱即用的中后臺(tái)管理模版
幾個(gè)強(qiáng)大的管理后臺(tái)模版，并聊聊他們的特點(diǎn)。

Vue vben admin

Vue Vben Admin 是一個(gè)免費(fèi)開源的中后臺(tái)模版。使用了最新的 vue3, vite2, TypeScript 等主流技術(shù)開發(fā)，開箱即用的中后臺(tái)前端解決方案，也可用于學(xué)習(xí)參考。
特點(diǎn)
最新技術(shù)棧：使用 Vue3/vite2 等前沿技術(shù)
TypeScript: 應(yīng)用程序級(jí) JavaScript 的語(yǔ)言
主題：可配置的主題
國(guó)際化：內(nèi)置完善的國(guó)際化方案
Mock 數(shù)據(jù) 內(nèi)置 Mock 數(shù)據(jù)方案
權(quán)限 內(nèi)置完善的動(dòng)態(tài)路由權(quán)限生成方案
組件 二次封裝了多個(gè)常用的組件

ant-simple-pro

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

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

vue3-template-admin

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

vue-admin-box

vue-admin-box 是一個(gè)免費(fèi)并且開源的中后臺(tái)管理系統(tǒng)模板。使用最新版本的 vue3+vite+element-plus 開發(fā)而成，目的是為了解決通用型的業(yè)務(wù)中后臺(tái)系統(tǒng)復(fù)雜的配置。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。