Vue3+TS+Vite 개발 기술: 코드 분할 및 주문형 로딩을 위해 Vite를 사용하는 방법

Vue3+TS+Vite 개발 기술: 코드 분할 및 주문형 로딩을 위해 Vite를 사용하는 방법

프론트 엔드 엔지니어링의 복잡성과 프로젝트 규모의 증가로 인해 코드 최적화는 모든 개발자에게 필수가 되었습니다. 올바른 질문입니다. 이것의 중요한 측면은 코드 분할과 주문형 로딩입니다. 코드 분할은 전체 프로젝트 코드를 작은 조각으로 나눌 수 있으며, 온디맨드 로딩은 필요할 때 해당 코드를 로드하여 웹 페이지의 성능과 로딩 속도를 효과적으로 향상시킬 수 있습니다. Vue3+TypeScript 프로젝트에서는 Vite 빌드 도구를 사용하여 코드 분할 및 주문형 로딩을 최적화할 수 있습니다.

1. VITE란 무엇인가요?

Vite는 ESM 기반의 프런트엔드 구성 도구로, 네이티브 ES 모듈의 특성을 활용하여 더 빠른 콜드 스타트 ​​및 핫 업데이트를 달성하고 주문형 로딩 및 코드 분할과 같은 최적화 기능을 지원합니다.

2. 코드 분할 사용

Vue3+TypeScript 프로젝트에서는 Vite에서 제공하는 가져오기 기능을 사용하여 주문형 코드 분할을 구현할 수 있습니다. 코드를 여러 모듈로 나누고 필요할 때만 해당 모듈을 로드하면 전체 페이지의 로딩 부담을 줄일 수 있습니다.

1. Install Vite

먼저 프로젝트에 Vite를 설치해야 합니다. npm 또는 Yarn을 통해 설치할 수 있습니다.

npm install -g create-vite 构建工具初始化
create-vite my-project 初始化新的项目
cd my-project 进入项目目录
npm install 安装依赖

2. Loading module on Demand

Vue3에서는 가져오기 기능을 사용하여 On-Demand 로딩을 구현할 수 있습니다. 예를 들어, 모든 모듈을 한 번에 로드하는 대신 가져오기 기능을 사용하여 필요한 곳에 특정 모듈을 로드할 수 있습니다.

import { createApp, defineAsyncComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const Home = defineAsyncComponent(() => import('./views/Home.vue'))
const About = defineAsyncComponent(() => import('./views/About.vue'))

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp(App).use(router).mount('#app')

위 예에서는 DefineAsyncComponent 함수를 사용하여 비동기 구성 요소를 만든 다음 가져오기 기능을 통해 요청에 따라 Home 및 About 구성 요소를 로드했습니다. 이를 통해 첫 번째 화면 로딩에 필요한 파일 크기를 효과적으로 줄이고 페이지 로딩 속도를 향상시킬 수 있습니다.

3. Vite의 주문형 로딩 구성

Vite에서는 vite.config.js를 구성하여 주문형 로딩 및 코드 분할을 구현할 수 있습니다.

1. 종속성 설치

프로젝트에서 요청 로드 및 분할 코드를 사용하기 전에 해당 종속성을 설치해야 합니다.

npm install @vitejs/plugin-legacy

2. vite.config.js 구성

프로젝트 루트 디렉터리에 vite.config를 생성합니다. .js 파일을 만들고 다음 코드를 추가합니다:

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

위 코드에서는 @vitejs/plugin-legacy 플러그인을 사용하고 대상 옵션을 통해 지원해야 하는 브라우저를 지정합니다. 여기서 '기본값'은 다음을 지원함을 나타냅니다. 최신 브라우저, 'IE 11이 아님'은 IE11 브라우저가 지원되지 않음을 의미합니다.

3. 컴파일 프로젝트

위 구성으로 온디맨드 로딩 및 코드 분할 구성이 완료되었습니다. 다음으로, 다음 명령을 실행하여 프로젝트를 컴파일할 수 있습니다:

npm run build

컴파일이 완료된 후 Vite는 자동으로 코드를 분할하고 필요에 따라 해당 모듈을 로드합니다.

위 구성을 통해 Vite를 사용하여 주문형 로딩 및 코드 분할을 성공적으로 구현했습니다. 이를 통해 프로젝트의 성능과 로딩 속도를 효과적으로 향상시키고 전체 페이지의 로딩 볼륨을 줄일 수 있습니다. Vue3+TypeScript 프로젝트에서 코드 분할 및 주문형 로딩을 위해 Vite를 사용하는 것은 프로젝트를 더욱 효율적이고 최적화하고 사용자 경험을 향상시킬 수 있는 매우 좋은 선택입니다.

요약:

이 글에서는 Vite를 사용하여 Vue3+TypeScript 프로젝트의 코드 분할 및 주문형 로딩을 구현하는 방법을 소개합니다. Vite의 주문형 로딩을 구성함으로써 모든 모듈을 한 번에 로드하는 대신 전체 프로젝트의 코드를 요청에 따라 작은 조각으로 분할할 수 있으므로 페이지 성능과 로딩 속도가 향상됩니다. ESM 기반의 프론트엔드 구축 툴인 Vite는 네이티브 ES 모듈의 특성을 활용하여 더 빠른 콜드 스타트와 핫 업데이트를 구현하는 동시에 온디맨드 로딩, 코드 분할 등의 최적화 기능을 지원합니다. 실제 프로젝트에서는 최상의 성능 최적화 효과를 달성하기 위해 특정 요구 사항에 따라 Vite를 구성할 수 있습니다. 이 기사가 Vue3+TypeScript 프로젝트에서 코드 분할 및 주문형 로딩을 최적화하는 데 도움이 되기를 바랍니다.

위 내용은 Vue3+TS+Vite 개발 기술: 코드 분할 및 주문형 로딩을 위해 Vite를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!