思考

vite的適用場景是什么？
由于我使用了tailwindcss插件 使用webpack 每次啟動所有的項目的css樣式都預先使用tailwindcss 轉換成css 性能普通的電腦啟動項目需要1分鐘到2分鐘。不過首次加載不會有什么多大的延遲，按需導入的頁面加載也不會有多大的延遲，但webpack下運行的tailwindcss有個問題就是修改樣式后動態編譯運行后 查看樣式很卡 長時間修改樣式 很吃內存 運行久了就會擠爆內存。
現在vue3很流行使用vite打包，所以我也嘗試使用vite。webpack 切換到vite，如果單看命令行中的運行，運行完畢不到一秒,不過首次打開頁面則需要等10秒到20秒左右的處理時間 請求數量達到了132個（瀏覽器對于這種并發請求會產生阻塞的），這里的文件最大了也是tailwindcss，并且打開按需加載的頁面路由時，還需要經過tailwindcss編譯css，打開未打開過的頁面還需等幾秒時間，這個體驗非常差。

vite 預打包

由于vite需要動態解析依賴，然后再打包。原理 參考vite 依賴預構建。所以首次打開頁面 解析 打包會很慢，因為vite 默認依賴構建 達不到預期 官方提供了依賴優化選項 讓開發者實現添加依賴項 optimizeDeps.exclude或者排除依賴項 optimizeDeps.include 這里我們使用 optimizeDeps.include添加依賴項。

添加依賴項

通常一些常見的依賴項如vue axios vue-router我們都可以知道可以添加到依賴項。但是一些樣式 js文件的依賴項我們無法準確的得知。這里使用第三方插件vite-plugin-optimize-persist
來實現獲取依賴項
參考 文章 vite首次打開界面加載慢問題/解決
安裝 插件

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

vite.config.ts添加配置 其中 include里面就是需要添加的依賴項

// 自動生成 預打包 import OptimizationPersist from "vite-plugin-optimize-persist"; import PkgConfig from "vite-plugin-package-config";export default ({ mode }) => {plugins: [vue(),//自動生成 預打包PkgConfig(),OptimizationPersist(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],optimizeDeps: {include: ["element-plus/es","element-plus/es/components/config-provider/style/css","element-plus/es/components/container/style/css","element-plus/es/components/main/style/css","element-plus/es/components/header/style/css","element-plus/es/components/date-picker/style/css","element-plus/es/components/drawer/style/css","element-plus/es/components/image/style/css","element-plus/es/components/image/style/css","element-plus/es/components/table/style/css","element-plus/es/components/table-column/style/css","element-plus/es/components/input/style/css","element-plus/es/components/dropdown/style/css","element-plus/es/components/popover/style/css","element-plus/es/components/dropdown-item/style/css","element-plus/es/components/dropdown-menu/style/css","element-plus/es/components/pagination/style/css","element-plus/es/components/scrollbar/style/css","element-plus/es/components/dialog/style/css","element-plus/es/components/loading/style/css","element-plus/es/components/tabs/style/css","element-plus/es/components/tab-pane/style/css","element-plus/es/components/select/style/css","element-plus/es/components/option/style/css","vue","pinia","jquery","sass","vue-router",// "tailwindcss","tailwindcss/plugin",],}, }

原本插件應該是在 package.json 中自動生成 類似于 “vite”: {
“optimizeDeps”: {
“include”: [
// managed by vite-plugin-optimize-persist
“@material-ui/core/Accordion”,
“@material-ui/core/AccordionSummary”,
“@material-ui/core/Dialog”,
“@material-ui/core/DialogActions”,
“@material-ui/icons/Dehaze”,
“date-fns/format”,
“lodash/debounce”,
“lodash/map”
]
}
}
的依賴項的 。但是我打開頁面發現package.json未自動生成依賴項。
所以我手動在vite.config.ts 添加依賴項 首次打開頁面時，當’‘include’'中的數組不包含該依賴項時 命令行會提示出來 添加進去即可。
// 依賴項命令行提示

添加依賴項后 命令行運行完畢慢幾百毫秒 但是按需加載頁面的加載速度可以得到提升

總結

以上是生活随笔為你收集整理的vite 本地运行首次进入页面加载慢问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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