Vue Academy · 강의

트리 셰이킹과 자동 가져오기

트리 셰이킹을 위한 이름 있는 내보내기, unplugin-vue-components 통합과 resolver 설정을 다룹니다.

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

트리 셰이킹이란

트리 셰이킹은 사용하지 않는 코드를 제거하는 기능입니다. 번들러가 사용자가 가져오지 않은 내보내기를 삭제합니다. 잘 빌드된 라이브러리를 사용하면 앱이 실제로 사용하는 컴포넌트만 포함하므로 번들 크기를 작게 유지할 수 있습니다.

명명된 내보내기로 활성화하기

진입점에서 명명된 내보내기를 사용하여 각 가져오기를 정적으로 분석할 수 있게 합니다. 모든 내용을 담은 하나의 기본 내보내기(배럴 객체)는 트리 셰이킹할 수 없습니다.

// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";

기본 배럴 객체 피하기

모든 컴포넌트를 하나의 객체로 내보내면 앱이 하나만 사용하더라도 번들러가 모든 컴포넌트를 유지하게 됩니다.

// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };

사용자는 필요한 항목만 가져오기

명명된 내보내기를 사용하면 사용자가 필요한 컴포넌트만 구조 분해하고 나머지는 빌드에서 제거됩니다.

import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundled

sideEffects 필드

번들러는 모듈에 부수 효과가 있을 수 있다고 가정하므로 모듈을 유지합니다. "sideEffects": false를 package.json에 설정하면 모듈이 순수하고 제거해도 안전하다는 것을 번들러에 알립니다.

{
  "sideEffects": false
}

CSS 부수 효과 선언하기

삭제하면 안 되는 CSS 가져오기가 패키지에 있다면 해당 항목을 나열하여 그것만 보존되도록 합니다.

{
  "sideEffects": ["**/*.css"]
}

사용자를 위한 자동 가져오기

수동 가져오기를 하지 않아도 되도록 라이브러리는 unplugin-vue-components용 리졸버를 제공합니다. 이 리졸버가 템플릿에서 사용하는 컴포넌트를 자동으로 가져옵니다.

npm install -D unplugin-vue-components

리졸버 제공하기

리졸버는 사용 중인 컴포넌트 이름을 받아 해당 컴포넌트를 가져올 위치를 반환하는 함수입니다. 패키지에서 리졸버를 제공합니다.

// my-ui-lib/resolver.js
export function MyUiResolver() {
  return {
    type: "component",
    resolve: (name) => {
      if (name.startsWith("My")) {
        return { name, from: "my-ui-lib" };
      }
    }
  };
}

사용자 설정

사용자는 리졸버와 함께 플러그인을 등록합니다. 이제 템플릿에서 사용하는 컴포넌트가 자동으로 가져와지고 트리 셰이킹도 계속 적용됩니다.

// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [MyUiResolver()] })
  ]
});

자동 가져오기와 트리 셰이킹

리졸버가 템플릿 사용을 실제 명명된 가져오기로 변환하므로 사용하는 컴포넌트만 번들에 포함됩니다. 편리함과 작은 번들을 모두 유지할 수 있습니다.

전역 등록 피하기

모든 컴포넌트를 app.use로 자동 등록하는 라이브러리는 트리 셰이킹을 막습니다. 명명된 내보내기와 선택적 리졸버를 사용하여 사용자가 컴포넌트별로 선택하도록 하는 편이 좋습니다.

빠른 확인

번들러에 모듈을 안전하게 트리 셰이킹할 수 있다고 알리는 package.json 설정은 무엇입니까?

복습

명명된 내보내기를 사용하고(기본 배럴 객체는 사용하지 않음) "sideEffects": false를 설정하거나 CSS를 나열하여 트리 셰이킹을 활성화합니다. 편리한 사용을 위해 unplugin-vue-components 리졸버를 제공하면 사용자가 사용하는 컴포넌트를 자동으로 가져오면서 실제로 사용하는 항목만 번들에 포함할 수 있습니다. 전역 등록을 강제하지도 않습니다.

자주 묻는 질문

“트리 셰이킹과 자동 가져오기” 강의는 무료인가요?

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

“트리 셰이킹과 자동 가져오기”에서 뭘 배우나요?

트리 셰이킹을 위한 이름 있는 내보내기, unplugin-vue-components 통합과 resolver 설정을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“트리 셰이킹과 자동 가져오기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기