快捷導(dǎo)航

vite2.0 踩坑實(shí)錄

更新時(shí)間：2021年07月02日 10:26:44 作者：溜溜球形廢物

本文主要介紹了vite2.0 踩坑，記錄了一些在配置項(xiàng)目中遇到的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vite項(xiàng)目構(gòu)建優(yōu)化

路由動(dòng)態(tài)導(dǎo)入經(jīng)過rollup的構(gòu)建，動(dòng)態(tài)導(dǎo)入的文件將會(huì)生成異步的chunk文件，在我們訪問項(xiàng)目的時(shí)候按需加載，極大的提升應(yīng)用的加載速度

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: '關(guān)于', 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) {
        // 通過前進(jìn)后臺(tái)時(shí)才觸發(fā)
        return savedPosition
      } else {
        return { top: 0, behavior: 'smooth' }
      }
    }
  })

router.beforeEach((to, from, next) => {
  // 可以對權(quán)限進(jìn)行一些校驗(yàn)
  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

上述代碼，是一個(gè)vite構(gòu)建的vue項(xiàng)目的router文件，使用的vue-router@4.0.6,Vue Router支持開箱即用的動(dòng)態(tài)導(dǎo)入，這意味著你可以用動(dòng)態(tài)導(dǎo)入代替靜態(tài)導(dǎo)入.在代碼中可以看到：about頁和square頁都是動(dòng)態(tài)導(dǎo)入的。

關(guān)于動(dòng)態(tài)導(dǎo)入，MDN上有非常詳細(xì)的介紹:傳送門

經(jīng)過rollup的構(gòu)建，動(dòng)態(tài)導(dǎo)入的文件將會(huì)生成異步的chunk文件，在我們訪問項(xiàng)目的時(shí)候按需加載，極大的提升應(yīng)用的加載速度。

在vite項(xiàng)目中的路由動(dòng)態(tài)導(dǎo)入中我踩的坑：

構(gòu)建時(shí)不支持@/別名。在構(gòu)建的時(shí)候，rollup構(gòu)建時(shí)并不能按照配置的別名找到對應(yīng)的文件，因此在構(gòu)建環(huán)節(jié)會(huì)有報(bào)錯(cuò)

解決方案：

一開始感覺是引用路徑的問題，所以嘗試了幾種引用方式,然后終于有一種成功了！component: () => import('/src/views/about/index.vue') 改成絕對路徑以后，就可以正常啟動(dòng)
升級(jí)vite版本，一開始是vite@2.0.0-beta.35，不支持別名。在升級(jí)到vite@2.3.8之后就支持了。估計(jì)是2.0剛出，一下子沒有寫完善也是可以理解滴～
使用import.meta.glob方法

我配置使遇到的一些報(bào)錯(cuò)和警告

warning: "import.meta" is not available in the configured target environment ("es2019") and will be empty

當(dāng)vite配置項(xiàng)esbuild.target 為 ‘es2019‘的時(shí)候，會(huì)有這個(gè)警告。表示這個(gè)情況下不支持使用import.meta api

[vite] Internal server error: Invalid glob import syntax: pattern must start with "." or "/" (relative to project root)

import.meta.glob() 中的參數(shù)必須以"." 或 "/" 開頭，相對根目錄進(jìn)行匹配

最終的寫法部分代碼：

  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: '關(guān)于', 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 方法，我們可以通過后臺(tái)接口來配置路由，可控的進(jìn)行權(quán)限控制。routes數(shù)據(jù)如果由接口返回，則不在權(quán)限范圍內(nèi)的組件根本不會(huì)生成路由項(xiàng)，這無疑增加了權(quán)限控制的力度。

配置build.rollupOptions.manualChunks，對node_modules文件進(jìn)行分包加載

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'
  }
}

如果不配置這項(xiàng)，vite會(huì)將node_modules包打包成一個(gè)大的異步vendor.js文件, 如果文件過大，這無疑增加了頁面渲染時(shí)的阻塞時(shí)長。而且不利于頁面緩存優(yōu)化。
在上面的配置中，我將ui框架（primeVue）、vue相關(guān)的包分別打包成一個(gè)文件，這樣做除了可以減少每個(gè)依賴文件的體積之外，還可以對項(xiàng)目的緩存進(jìn)行優(yōu)化。這些基礎(chǔ)庫之類的依賴包，更新的次數(shù)會(huì)比較少。
結(jié)合服務(wù)端的文件緩存策略配置，用戶除了首次訪問時(shí)需要加載這些依賴文件，后面再訪問，都可以直接從緩存讀取。將依賴文件代碼進(jìn)行一定的切割，可以極大的提升項(xiàng)目的性能。

而且，vite在構(gòu)建的時(shí)候，會(huì)自動(dòng)生成如下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>我的項(xiàng)目</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標(biāo)簽，可以預(yù)加載原生模塊，保證某些文件可以不必等到執(zhí)行時(shí)才加載，同樣可以提升頁面的性能

圖片資源文件處理。資源體積小于 assetsInlineLimit 選項(xiàng)值則會(huì)被內(nèi)聯(lián)為 base64 data URL，一起被打包至引用它的文件中。以此減少對文件的請求次數(shù)，提升項(xiàng)目性能

其它

給動(dòng)態(tài)導(dǎo)入文件生成的異步chunk，放置相對應(yīng)的文件夾中，或者自定義給chunk命名。

嘿嘿，查了rollup文檔很久，又自己試了好一會(huì)兒，終于成功了。參考如下配置：

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之間，配置項(xiàng)會(huì)存在一些差異，所以在對項(xiàng)目進(jìn)行配置的時(shí)候，如果你完全按照文檔進(jìn)行配置還是有問題，不妨看看是不是自己的版本與文檔的版本不一樣導(dǎo)致的。