Vue3과 Vue2의 차이점: 더 가벼운 패키지 크기-View.js-php.cn

Vue3과 Vue2의 차이점: 더 가벼운 패키지 크기

WBOY

풀어 주다： 2023-07-09 08:42:06

원래의

1596명이 탐색했습니다.

Vue3과 Vue2의 차이점: 더 가벼운 번들 크기

Vue.js는 사용자 인터페이스 및 단일 페이지 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue.js 버전 2.x가 출시된 이후 프런트엔드 개발자들 사이에서 매우 인기 있는 선택이 되었습니다. 그러나 Vue.js 3이 출시되면서 많은 새로운 기능과 개선 사항이 적용되어 더 나은 선택이 되었습니다. 가장 중요한 개선 사항 중 하나는 Vue3의 패키지 크기 최적화로 애플리케이션을 더욱 가볍게 만듭니다.

Vue3 패키징 크기 최적화는 주로 4가지 측면에 반영됩니다.

더 효율적인 Tree-Shaking

Vue3은 템플릿을 더 작고 효율적인 코드로 컴파일하기 위해 새로운 컴파일 템플릿 방법을 채택합니다. 새 버전에서는 템플릿 컴파일 프로세스가 더욱 지능화되었으며 Tree-Shaking 기술을 통해 더 나은 코드 트리 쉐이킹 성능이 달성됩니다. 즉, Vue3에서는 애플리케이션에서 실제로 사용되는 부분만 최종 빌드 결과에 패키징되므로 불필요한 코드가 줄어들어 애플리케이션의 패키징 크기가 줄어듭니다.

모듈화 지원

Vue3는 ES 모듈화를 완벽하게 지원하며 ES 모듈 시스템을 사용하여 코드를 구성하고 로드합니다. 이전 Vue2와 비교하여 이 모듈식 접근 방식은 더 가볍습니다. 애플리케이션을 독립 모듈로 분할하면 코드를 더 잘 관리할 수 있고 개발 중에 모듈을 더 쉽게 공유하고 재사용할 수 있습니다. 이런 방식으로 중복 코드를 줄일 수 있고, 빌드 과정에서 사용된 모듈만 패키징하면 되므로 패키징 크기도 줄어듭니다.

정적 구성 요소 부스팅

Vue3에는 정적 구성 요소 부스팅이라는 최적화 기술이 도입되었습니다. Vue2에서는 컴포넌트가 렌더링될 때마다 새로운 반응형 인스턴스가 생성되어 일정량의 메모리와 성능을 소비합니다. Vue3에서는 새로운 컴파일 방법을 통해 정적 구성 요소를 감지하고 일반 JavaScript 개체로 변환할 수 있으므로 불필요한 인스턴스화를 줄이고 패키징 크기를 더 경량화할 수 있습니다.

다음은 Vue3에서 정적 구성 요소 승격을 사용하는 방법을 보여주는 간단한 예입니다.

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>我是静态组件</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    const message = 'Hello Vue3!'
    return { message }
  }
}
</script>

<!-- App.vue -->
<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: { MyComponent }
}
</script>

로그인 후 복사

위 예에서 MyComponent 구성 요소는 정적 구성 요소로 표시되고 App에 표시됩니다. vue 가 인용되었습니다. 즉, MyComponent 구성 요소는 애플리케이션이 초기화될 때 한 번만 인스턴스화되고 구성 요소가 반복적으로 렌더링될 때 다시 인스턴스화되지 않으므로 애플리케이션 성능이 향상되고 패키징 비용이 줄어듭니다. MyComponent组件被标记为静态组件，并且在App.vue中被引用。这意味着，MyComponent组件只会在应用程序初始化时实例化一次，并且不会随着组件的重复渲染而重新实例化，进而提高了应用程序的性能并减小了打包大小。