구덩이 밟 기 실 록

지난 편 에 대한 보충 이 라 고 할 수 있 습 니 다.설정 항목 에서 발생 한 문 제 를 기록 하 였 습 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다~
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-를 사용 합 니 다[email protected] 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 이'es 2019'일 때 이 경고 가 있 습 니 다.이 경우 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 설정,nodemodules 파일 을 패키지 로 불 러 옵 니 다.

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 는 nodemodules 패 키 지 는 큰 비동기 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"속성의 링크 탭 을 추가 하여 원생 모듈 을 미리 불 러 올 수 있 습 니 다.일부 파일 은 실행 할 때 까지 기다 리 지 않 고 불 러 올 수 있 도록 합 니 다.또한 페이지 의 성능 을 향상 시 킬 수 있 습 니 다.
그림 자원 파일 처리.자원 부피 가 assets InlineLimit 옵션 값 보다 작 으 면 base 64 data URL 로 연결 되 어 참조 파일 에 포 장 됩 니 다.이로써 파일 에 대한 요청 횟수 를 줄 이 고 프로젝트 성능 을 향상 시킨다
기타
동적 가 져 오기 파일 에 생 성 된 비동기 chunk,해당 하 는 폴 더 에 놓 거나 chunk 이름 을 사용자 정의 합 니 다.
헤헤,롤 업 문 서 를 한참 찾 았 는데,또 스스로 한참 을 시도 해 보 았 는데,마침내 성공 했다.다음 설정 참조:

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 2.0+Vue 3.0 프로젝트 를 공유 하 겠 습 니 다.전송 문물 을 시험 하 는 프로젝트 입 니 다.잘못된 점 이 있 으 면 지적 해 주 십시오! 
여기 서 vite 2.0 구덩이 밟 기 실 록 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vite 2.0 구덩이 밟 기 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!