Vue Academy · 강의

Vite 생태계: 플러그인과 도구

unplugin 생태계, vite-plugin-vue, vite-plugin-inspect와 vite-bundle-visualizer를 살펴봅니다.

Vite 생태계: 플러그인과 도구은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Vite 플러그인 생태계

Vite의 플러그인 시스템은 Rollup의 인터페이스와 Vite 전용 훅을 기반으로 하며 풍부한 생태계를 제공합니다. Vue 프로젝트에서는 몇 가지 플러그인만으로 개발자 경험을 크게 향상할 수 있습니다. 자동 가져오기, 컴포넌트 자동 등록, 변환 과정 검사, 번들 분석 등이 대표적입니다.

unplugin-auto-import

unplugin-auto-import는 자주 사용하는 API(Vue의 ref, computed, Router/Pinia 헬퍼, 직접 만든 컴포저블)를 자동으로 가져오므로 import 문을 직접 작성하지 않고도 사용할 수 있습니다.

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

컴포저블 자동 가져오기

컴포저블 디렉터리를 지정하면 해당 함수도 전역에서 사용할 수 있게 됩니다. 또한 .d.ts를 생성하므로 TypeScript와 편집기가 해당 함수의 타입을 계속 이해할 수 있습니다.

AutoImport({
  imports: ['vue'],
  dirs: ['src/composables'], // auto-import useFoo, useBar
  dts: 'src/auto-imports.d.ts'
})

// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()

unplugin-vue-components

unplugin-vue-components는 필요할 때 컴포넌트를 자동으로 가져오고 등록합니다. 템플릿에 <MyButton />를 넣기만 하면 플러그인이 자동으로 가져옵니다. 사용하지 않는 컴포넌트는 트리 셰이킹도 수행합니다.

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts'
    })
  ]
})

UI 라이브러리용 리졸버

컴포넌트 플러그인은 인기 있는 UI 라이브러리(Element Plus, Vuetify, Naive UI)의 리졸버를 지원합니다. 사용할 때 해당 라이브러리의 컴포넌트와 스타일을 자동으로 가져오므로 수동 등록이 필요하지 않습니다.

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no import

vite-plugin-inspect

vite-plugin-inspect는 각 플러그인이 변환 파이프라인을 거치며 코드를 어떻게 변환하는지 확인할 수 있는 UI를 제공합니다. 파일이 최종적으로 그런 형태가 된 이유를 디버깅할 때 매우 유용합니다.

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in dev

변환 파이프라인 읽기

Inspect UI에서 모듈을 선택한 다음 각 플러그인의 변환 단계를 차례로 살펴볼 수 있습니다. 예를 들어 Vue SFC가 render와 script로 나뉘는 과정, 자동 가져오기가 코드를 주입하는 과정을 확인하여 문제를 일으키는 플러그인을 정확히 찾아낼 수 있습니다.

번들 시각화 도구

프로덕션 번들 크기를 파악하려면 시각화 플러그인(예: rollup-plugin-visualizer)을 사용하십시오. 이 플러그인은 빌드 후 각 청크에 포함된 내용을 대화형 트리맵으로 보여 줍니다.

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({ open: true, filename: 'stats.html' })
  ]
})

시각화 결과 활용

트리맵을 사용해 지나치게 큰 의존성과 중복 패키지를 찾아보십시오. 일반적인 해결 방법으로는 무거운 라우트나 컴포넌트를 지연 로드하고, 더 가벼운 라이브러리로 교체하거나, manualChunks를 구성하여 공급업체 코드를 분할하는 방법이 있습니다.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

플러그인 결합

이 플러그인들은 서로 잘 조합됩니다. 일반적인 Vue 설정에서는 자동 가져오기, 컴포넌트, 검사 플러그인(개발 환경 전용), 시각화 도구(빌드 환경 전용)를 함께 구성하여 가장 원활한 작업 흐름을 만듭니다.

plugins: [
  vue(),
  AutoImport({ imports: ['vue', 'vue-router'] }),
  Components({ dirs: ['src/components'] }),
  Inspect(),
  visualizer({ filename: 'stats.html' })
]

dts 파일의 Git 제외 설정 이해하기

자동 가져오기 플러그인과 컴포넌트 플러그인은 .d.ts 파일을 생성합니다. 이를 커밋할지 결정하십시오. 커밋하면 빌드 없이도 CI에서 타입 검사를 수행할 수 있고, Git에서 제외하면 개발 시작 시 다시 생성됩니다. 어느 쪽이든 tsconfig의 포함 목록에는 해당 파일을 유지하십시오.

빠른 확인

Vite 도구 생태계에 대한 이해도를 확인해 보십시오.

요약

Vite 도구 생태계에 대해 배운 내용입니다:

unplugin-auto-import — Vue API와 컴포저블을 자동으로 가져옵니다
unplugin-vue-components — UI 리졸버를 지원하며 컴포넌트를 자동으로 가져오고 등록합니다
vite-plugin-inspect — 각 모듈을 플러그인이 어떻게 변환하는지 보여 줍니다
번들 시각화 도구 — 최적화 방향을 정할 수 있도록 청크 내용을 트리맵으로 보여 줍니다
이 플러그인들을 조합하면 원활한 Vue 개발 및 빌드 작업 흐름을 만들 수 있습니다

자주 묻는 질문

“Vite 생태계: 플러그인과 도구” 강의는 무료인가요?

네 — “Vite 생태계: 플러그인과 도구” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Vite 생태계: 플러그인과 도구”에서 뭘 배우나요?

unplugin 생태계, vite-plugin-vue, vite-plugin-inspect와 vite-bundle-visualizer를 살펴봅니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“Vite 생태계: 플러그인과 도구” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기