vite2.0 ставит рекорд на пит-стопе

Это дополнение к предыдущей статье, в нем описаны некоторые проблемы, возникшие в проекте конфигурации, надеюсь, оно будет полезно всем~

Оптимизация проекта Vite Project

Динамический импорт маршрутов. После создания свертывания динамически импортированные файлы будут генерировать асинхронные файлы фрагментов, которые загружаются по запросу при доступе к проекту, что значительно повышает скорость загрузки приложения.
```
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
```
Приведенный выше код представляет собой файл маршрутизатора проекта vue, созданного vite с использованиемvue-router@4.0.6, Vue Router поддерживает динамический импорт из коробки, что означает, что вы можете заменить статический импорт динамическим импортом.В коде видно: страница about и квадратная страница импортируются динамически. Что касается динамического импорта, в MDN есть очень подробное введение:портал

После создания накопительного пакета динамически импортированный файл создаст асинхронный файл фрагмента, который будет загружаться по требованию при доступе к проекту, что значительно повышает скорость загрузки приложения.

Яма, на которую я наступил при динамическом импорте маршрутов в проекте vite:

Не поддерживается во время сборки@/псевдоним. При сборке накопительный пакет не может найти соответствующий файл в соответствии с настроенным псевдонимом, поэтому в процессе сборки будет сообщено об ошибке.

решение:
1. Сначала я подумал, что это проблема с эталонным путем, поэтому я попробовал несколько эталонных методов, и, наконец, один из них удался!component: () => import('/src/views/about/index.vue')После перехода на абсолютный путь он может запускаться нормально
2. Обновите версию vite, сначала онаvite@2.0.0-beta.35, псевдонимы не поддерживаются. обновление доvite@2.3.8Поддержал после этого. Предполагается, что 2.0 только что вышла, и понятно, что она не пишется полностью сразу~
3. Используйте метод 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, мы можем настроить маршрутизацию через фоновый интерфейс и управлять разрешениями. Если данные о маршрутах возвращаются интерфейсом, компоненты, не входящие в область полномочий, вообще не будут генерировать элементы маршрутизации, что, несомненно, увеличивает силу контроля полномочий.
Настройте 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 framework (primeVue) и связанные с vue пакеты в один файл, что позволяет не только уменьшить размер каждого зависимого файла, но и оптимизировать кеш проекта. Зависимые пакеты, такие как эти базовые библиотеки, будут обновляться реже. В сочетании с конфигурацией политики кэширования файлов на сервере пользователи могут читать эти зависимые файлы непосредственно из кэша, за исключением случаев, когда они сначала обращаются к файлам, а затем обращаются к ним позже. Сокращение кода зависимого файла до определенной степени может значительно повысить производительность проекта.

Более того, когда vite собирается, он автоматически генерирует следующие html-файлы.
```
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <link rel="icon" href="/favicon.ico" />
      <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">
    <link rel="modulepreload" href="/js/prime/prime.eb4bfea6.js">
    <link rel="stylesheet" href="/assets/prime.296674d4.css">
    <link rel="stylesheet" href="/assets/index.289426b3.css">
  </head>
    <body>
      <div id="app"></div>
      
    </body>
  </html>
```
который добавилrel="modulepreload"Тег ссылки атрибута может предварительно загружать собственный модуль, чтобы гарантировать загрузку некоторых файлов без ожидания выполнения, что также может повысить производительность страницы.
Обработка файла ресурса изображения. Активы меньше значения параметра assetsInlineLimit будут встроены как URL-адрес данных base64 и упакованы в файл, который на них ссылается. Это уменьшает количество запросов файлов и повышает производительность проекта.

разное

Поместите асинхронный фрагмент, сгенерированный файлом динамического импорта, в соответствующую папку или настройте имя фрагмента.

Эй, я долго проверял документацию по накопительному пакету, некоторое время пробовал сам и, наконец, преуспел. Обратитесь к следующей конфигурации:

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 ставит рекорд на пит-стопе

Оптимизация проекта Vite Project

разное

наконец

Спасибо, что читаете муа~