vite2.0 踩坑實錄
目錄
- vite專案構建優化
- 其它
- 最後
算是對上一篇的補充，記錄了一些在配置專案中遇到的問題，希望對大家能有所幫助～
vite專案構建優化
路由動態匯入 經過rollup的構建，動態匯入的檔案將會生成非同步的chunk檔案，在我們訪問專案的時候按需載入，極大的提升應用的載入速度
import Home from '@/views/home/index.'
import Layout from '@/components/Layout.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',component: Layout,redirect: '/home',children: [
{
path: '/home',name: 'Home',component: Home,meta: { title: '首頁' }
},{
path: '/about',name: 'About',meta: { title: '關於',keepAlive: true },component: () => import('@/views/about/index.vue')
},{
path: '/square',name: 'Square',meta: { title: '元件廣場',component: () => import('@/views/square/index.vue')
}
]
}
]
const router = createRouter({
history: process.env.NODE_ENV === 'development'
? createWebHistory(process.env.BASE_URL)
: createWebHashHistory(process.env.BASE_URL),routes,scrollBehavior(to,from,savedPosition) {
if (savedPosition) {
// 通過前進後臺時才觸發
return savedPosition
} else {
return { top: 0,behavior: 'smooth' }
}
}
})
router.beforeEach((to,next) => {
// 可以對許可權進行一些校驗
if (to.path !== from.path) {
document.title = `星樂圈 | ${to.meta.title}`
}
next()
})
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g
const isChunkLoadFailed = error.message.match(pattern)
if (isChunkLoadFailed) {
location.reload()
}
})
export default router
上述程式碼，是一個vite構建的vue專案的router檔案，使用的[email protected],Vue Router支援開箱即用的動態匯入，這意味著你可以用動態匯入代替靜態匯入.在程式碼中可以看到：about頁和square頁都是動態匯入的。
關於動態匯入，MDN上有非常詳細的介紹:傳送門
經過rollup的構建，動態匯入的檔案將會生成非同步的chunk檔案，在我們訪問專案的時候按需載入，極大的提升應用的載入速度。
在vite專案中的路由動態匯入中我踩的坑：
構建時不支援@/別名。在構建的時候，rollup構建時並不能按照配置的別名找到對應的檔案，因此在構建環節會有報錯
解決方案：
- 一開始感覺是引用路徑的問題，所以嘗試了幾種引用方式,然後終於有一種成功了！component: () => import('/src/views/about/index.vue') 改成絕對路徑以後，就可以正常啟動
- 升級vite版本，一開始是[email protected]，不支援別名。在升級到[email protected]之後就支援了。估計是2.0剛出，一下子沒有寫完善也是可以理解滴～
- 使用import.meta.glob方法
我配置使遇到的一些報錯和警告
warning: "import.meta" is not available in the configured target environment ("es2019") and will be empty
當vite配置項esbuild.target 為 ‘es2019‘的時候，會有這個警告。表示這個情況下不支援使用import.meta api
[vite] Internal server error: Invalid glob import syntax: pattern must start with "." or "/" (relative to project root)
import.meta.glob() 中的引數必須以"." 或 "/" 開頭，相對根目錄進行匹配
最終的寫法部分程式碼：
import Layout from '@/components/Layout.vue'
const modules = import.meta.glob('/src/views/*/index.vue')
const routes: Array<RouteRecordRaw> = [
{
path: '/',children: [
{
path: '/home',component: modules['/src/views/home/index.vue'],meta: { title: '首頁' }
},{
path: '/about',component: modules['/src/views/about/index.vue']
},{
path: '/square',component: modules['/src/views/square/index.vue']
}
]
}
]
通過使用import.meta.glob 方法，我們可以通過後臺介面來配置路由，可控的進行許可權控制。routes資料如果由介面返回，則不在許可權範圍內的元件根本不會生成路由項，這無疑增加了許可權控制的力度。
配置build.rollupOptions.manualChunks，對node_modules檔案進行分包載入
manualChunRjzofVjks(id) {
if (id.includes('node_modules') && id.includes('prime')) {
return 'prime'
} else if (id.includes('node_modules') && id.includes('vue')) {
return 'vue'
} else if (id.includes('node_modules')) {
return 'vendor'
}
}
如果不配置這項，vite會將node_modules包打包成一個大的非同步vendor.檔案,如果檔案過大，這無疑增加了頁面渲染時的阻塞時長。而且不利於頁面快取優化。
在上面的配置中，我將ui框架（primeVue）、vue相關的包分別打包成一個檔案，這樣做除了可以減少每個依賴檔案的體積之外，還可以對專案的快取進行優化。這些基礎庫之類的依賴包，更新的次數會比較少。
結合服務端的檔案快取策略配置，使用者除了首次訪問時需要載入這些依賴檔案，後面再訪問，都可以直接從快取讀取。將依賴檔案程式碼進行一定的切割，可以極大的提升專案的效能。
而且，vite在構建的時候，會自動生成如下html檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" rel="external nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>我的專案</title>
<script type="module" crossorigin src="/assets/index.e3627129.js"></script>
<link rel="modulepreload" href="/js/vue/vue.a1ee204f.js" rel="external nofollow" >
<link rel="modulepreload" href="/js/prime/prime.eb4bfea6.js" rel="external nofollow" >
<link rel="stylesheet" href="/assets/prime.296674d4." rel="external nofollow" >
<link rel="stylesheet" href="/assets/index.289426b3.css" rel="external nofollRjzofVjow" >
</head>
<body>
<div id="app"></div>
</body>
</html>
其中加了rel="modulepreload"屬性的link標籤，可以預載入原生模組，保證某些檔案可以不必等到執行時才載入，同樣可以提升頁面的效能
圖片資原始檔處理。資源體積小於 assetsInlineLimit 選項值 則會被內聯為 base64 data URL，一起被打包至引用它的檔案中。以此減少對檔案的請求次數，提升專案效能
其它
給動態匯入檔案生成的非同步chunkwww.cppcns.com，放置相對應的資料夾中，或者自定義給chunk命名。
嘿嘿，查了rollup文件很久，又自己試了好一會兒，終於成功了。參考如下配置：
export default defineConfig({
build: {
assetsDir: 'assets',rollupOptions: {
output: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
chunkFileNames: (chunkInfo: any) => {
const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []
const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'
return `js/${fileName}/[name].[hash].js`
},}
}
}
})
vite配置傳入全域性的scss變數
配置如下
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/styles/variables";'
}
}
},})
還需要注意的是，不同版本的vite之間，配置項會存在一些差異，所以在對專案進行配置的時候，如果你完全按照文件進行配置還是有問題，不妨看看是不是自己的版本與文件的版本不一樣導致的。
最後
分享一下我配置好了的vite2.0+Vue3.0專案：傳送門,用來試水的專案，如果有什麼不對的地方，歡迎指正！
到此這篇關於vite2.0 踩坑實錄的文章就介紹到這了,更多相關vite2.0 踩坑內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！