UI 프레임워크의 '개별 구성 요소 가져오기' 실행으로 Vue js 앱의 성능이 향상됩니까?

UI 프레임워크의 '개별 구성 요소 가져오기' 실행으로 Vue js 앱의 성능이 향상됩니까?

UI 프레임워크(Bootstrap-Vue, Element 등)를 사용하는 경우Vuejs 어플리케이션의 UI 또는 Vuetify 등)에서는 App.vue(또는 어플리케이션 엔트리 포인트)의 node_module에서 UI 프레임워크 컴포넌트 및 스타일시트 전체를 Import하거나 필요에 따라 특정 UI 컴포넌트를 Import할 수 있습니다.

이 두 가지 접근법의 시연은 다음과 같습니다.

scenerio 1의 경우

App.vue에서

import BootstrapVue from 'bootstrap-vue'

scenerio 2의 경우

특정 .vue 파일에서

import {BContainer} from 'bootstrap-vue'

첫 번째 옵션의 경우 UI 프레임워크의 모든 컴포넌트가 루트 변경마다 로드되기 때문에 어플리케이션의 퍼포먼스가 느려지거나 저하됩니까?또한 불필요한 부품을 로드하고 있습니다.

한편, 각 UI 컴포넌트를 .vue 파일에 Import 하는 것은 매우 불편합니다.

그렇다면 소규모 또는 대규모 웹 애플리케이션을 위한 베스트 프랙티스는 무엇일까요?다른 JS 프레임워크/라이브러리 링크 React 또는 Angular에 대한 관행은 동일합니까?잘 부탁드립니다.

시나리오 1 – 모든 컴포넌트를 글로벌하게 등록

• 라이브러리의 모든 컴포넌트를 어디서나 사용할 수 있습니다.
• 라이브러리를 변경하거나 업데이트하고 일부 구성 요소 이름이 변경된 경우 빌드 시 오류가 발생하지 않습니다.

시나리오 2 – 특정 컴포넌트를 로컬에서 선택하여 선택

• 사용할 때 각 구성 요소를 가져와야 하는 번거로움이 생깁니다.
• 실제로 사용되고 있는(가져온) 컴포넌트만 번들에 포함됩니다(Web pack 등을 사용하는 경우).그 결과 번들 사이즈가 작아집니다.
• 템플릿을 보고 각 컴포넌트의 출처를 파악하는 것이 더 명확합니다.글로벌하게 정의된 컴포넌트가 많은 경우 컴포넌트와 컴포넌트의 출처가 명확하게 연결되어 있지 않습니다.
• 라이브러리를 변경하거나 업데이트하고 일부 컴포넌트 이름이 변경된 경우 모듈이 누락되어 빌드 오류가 발생합니다.

첫 번째 옵션의 경우 UI 프레임워크의 모든 컴포넌트가 루트 변경마다 로드되기 때문에 어플리케이션의 퍼포먼스가 느려지거나 저하됩니까?또한 불필요한 부품을 로드하고 있습니다.

전체 패키지를 글로벌하게 Import할 경우 차이가 발생합니다. Import가 에 있기 에 모든 App.vue처음 앱이 로드되었을 때 한 번 실행됩니다. 이 기사는 타사 구성 요소를 vue 앱에 로드하는 방법을 최적화하는 데 매우 도움이 되었습니다.

한편, 각 UI 컴포넌트를 .vue 파일에 Import 하는 것은 매우 불편합니다.

의 앱을 때를 할 .import개별 컴포넌트로 코드화합니다.

언급URL : https://stackoverflow.com/questions/61703881/does-individual-component-importing-practice-of-a-ui-framework-makes-vue-js-ap