您好,登錄后才能下訂單哦!
這篇文章主要介紹了vite項目構建優化的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
路由動態導入 經過rollup的構建,動態導入的文件將會生成異步的chunk文件,在我們訪問項目的時候按需加載,極大的提升應用的加載速度
import Home from '@/views/home/index.vue' 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: '組件廣場', keepAlive: true }, 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, from, 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文件,使用的vue-router@4.0.6,Vue Router支持開箱即用的動態導入,這意味著你可以用動態導入代替靜態導入.在代碼中可以看到:about頁和square頁都是動態導入的。
關于動態導入,MDN上有非常詳細的介紹:傳送門
經過rollup的構建,動態導入的文件將會生成異步的chunk文件,在我們訪問項目的時候按需加載,極大的提升應用的加載速度。
在vite項目中的路由動態導入中我踩的坑:
構建時不支持@/別名。在構建的時候,rollup構建時并不能按照配置的別名找到對應的文件,因此在構建環節會有報錯
解決方案:
一開始感覺是引用路徑的問題,所以嘗試了幾種引用方式,然后終于有一種成功了!component: () => import('/src/views/about/index.vue') 改成絕對路徑以后,就可以正常啟動
升級vite版本,一開始是vite@2.0.0-beta.35,不支持別名。在升級到vite@2.3.8之后就支持了。估計是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: '/', component: Layout, redirect: '/home', children: [ { path: '/home', name: 'Home', component: modules['/src/views/home/index.vue'], meta: { title: '首頁' } }, { path: '/about', name: 'About', meta: { title: '關于', keepAlive: true }, component: modules['/src/views/about/index.vue'] }, { path: '/square', name: 'Square', meta: { title: '組件廣場', keepAlive: true }, component: modules['/src/views/square/index.vue'] } ] } ]
通過使用import.meta.glob 方法,我們可以通過后臺接口來配置路由,可控的進行權限控制。routes數據如果由接口返回,則不在權限范圍內的組件根本不會生成路由項,這無疑增加了權限控制的力度。
配置build.rollupOptions.manualChunks,對node_modules文件進行分包加載
manualChunks(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.js文件, 如果文件過大,這無疑增加了頁面渲染時的阻塞時長。而且不利于頁面緩存優化。
在上面的配置中,我將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.css" rel="external nofollow" > <link rel="stylesheet" href="/assets/index.289426b3.css" rel="external nofollow" > </head> <body> <div id="app"></div> </body> </html>
其中加了rel="modulepreload"屬性的link標簽,可以預加載原生模塊,保證某些文件可以不必等到執行時才加載,同樣可以提升頁面的性能
圖片資源文件處理。資源體積小于 assetsInlineLimit 選項值 則會被內聯為 base64 data URL,一起被打包至引用它的文件中。以此減少對文件的請求次數,提升項目性能
給動態導入文件生成的異步chunk,放置相對應的文件夾中,或者自定義給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之間,配置項會存在一些差異,所以在對項目進行配置的時候,如果你完全按照文檔進行配置還是有問題,不妨看看是不是自己的版本與文檔的版本不一樣導致的。
感謝你能夠認真閱讀完這篇文章,希望小編分享的“vite項目構建優化的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。