VUE 응용 프로그램의 번들 크기를 분석하는 방법은 무엇입니까?

@vue/cli-plugin-bundler를 설치하고 NPM 실행 빌드를 실행하여 모듈 크기의 시각적 트리 맵을 생성하여 Vue Cli의 내장 번들 분석기를 사용하십시오. 2. 사용자 정의 웹 팩 설정의 경우 Webpack-Bundle-Analyzer를 수동으로 설치하고 플러그인을 vue.config.js에 추가하고 빌드를 실행하여 정적 분석 보고서를 생성하십시오. 3. vite 기반 앱의 경우 롤업 플러그 인-방문기를 설치하고 vite.config.js로 구성하고 빌드를 실행하여 대화식 번들 보고서를 생성하십시오. 4. GZIP 압축이 성능에 크게 영향을 미치기 때문에 소스 -MAP-explorer와 같은 도구를 사용하여 GZIPPED 크기를 분석합니다. 5. Const Page = () => import ( './ page.vue')와 같은 동적 가져 오기를 통한 공급 업체 번들 크기, 앱 코드 효율, 중복 패키지 및 적절한 코드 분할을 포함한 주요 메트릭을 모니터링합니다. 6. 선택적으로 vue.config.js에서 크기 예산을 WebPack의 성능 힌트를 사용하여 진입 지점 및 자산의 한도를 시행하고, 초과시 경고 또는 실패를 유발합니다. 시각적 도구를 사용한 정기적 인 번들 분석은 압축 크기에 중점을두고 불필요한 종속성을 제거하여 더 성능이있는 VUE 애플리케이션을 초래함으로써 팽의 조기 식별, 최적화 우선 순위를 정하고, 특히 느린 네트워크에서 빠른로드 시간을 유지하는 데 도움이됩니다.

VUE 애플리케이션의 번들 크기를 분석하는 것은 특히 앱이 성장함에 따라 성능 최적화에 필수적입니다. 큰 번들은 특히 모바일 또는 느린 네트워크에서로드 시간이 느려집니다. 효과적으로 분석하는 방법은 다음과 같습니다.

1. Vue Cli의 내장 번들 분석기 사용 (Vue Cli를 사용하는 경우)

Vue Cli를 사용하는 경우 가장 쉬운 방법은 @vue/cli-plugin-bundle-analyzer 플러그인을 사용하는 것입니다.

단계 :

• 플러그인 설치 :

   vue 추가 분석기

• 분석기로 빌드를 실행하십시오.

   NPM 실행 빌드

• 구축 후 브라우저에서 보고서가 자동으로 열립니다.

이것은 후드 아래에서 Webpack-Bundle-Analyzer를 사용하므로 크기별로 모든 종속성의 트리 맵을 얻습니다.

2. Webpack-Bundle-Analyzer를 수동으로 통합 (사용자 정의 설정 용)

Vite, Nuxt 또는 사용자 정의 웹 팩 설정을 사용하는 경우 분석기를 수동으로 추가 할 수 있습니다.

웹 팩 기반 VUE 앱의 경우 :

• 설치하다:

  

   NPM 설치-사브 데브 웹 팩 -Bundle-Analyzer

• vue.config.js 를 업데이트합니다.

   const bundleanalyzerplugin = 요구 사항 ( 'Webpack-Bundle-Analyzer'). Bundleanalyzerplugin;
  
  module.exports = {
    configureWebPack : {
      플러그인 : [
        새로운 Bundleanalyzerplugin ({{
          OpenAnalyzer : True,
          AnalyzerMode : 'static', // html 파일을 생성합니다
        }),
      ],,
    },
  };

• 실행 npm run build - 보고서가 생성되고 열립니다.

3. Vite의 빌드 분석기 사용 (Vite 기반 VUE 앱 용)

Vite를 사용하는 경우 Vue CLI 도구가 작동하지 않습니다. 대신 사용하십시오 :

rollup-plugin-visualizer

• 설치하다:

   NPM 설치-사브 DEV 롤업 플러그 인-시청자

• vite.config.js 에 추가하십시오.

   'vite'에서 {defuleconfig} 가져 오기;
  '@vitejs/plugin-vue'에서 vue 가져 오기;
  '롤업-플러그 인-시청자'에서 {visualizer} 가져 오기;
  
  내보내기 DefuleConfig ({
    플러그인 : [
      vue (),
      Visualizer ({
        Open : True,
        파일 이름 : 'bundle-report.html',
      }),
    ],,
  });

• 짓다:

   NPM 실행 빌드

• bundle-report.html 열어서 덩어리의 세부적인 트리 맵을 볼 수 있습니다.

4. gzipped 대 생 크기를 확인하십시오

번들 분석기는 원시 파일 크기를 보여 주지만 가장 중요한 것은 사용자가 다운로드하는 것이기 때문에 압축 (GZIP) 크기 입니다.

• 다음과 같은 도구 사용 :
  • 소스 -MAP- 탐색기 (GZIP 분석 지원)
  • 또는 수동으로 확인하십시오.

     NPX 소스 -MAP- 탐색기 Dist/JS/Chunk-Vendors.*. JS

• 시각적 맵을 생성하고 GZIP 시뮬레이션 후 크기를 보여줍니다.

5. 주요 메트릭을 모니터링하십시오

분석 할 때 다음에 중점을 둡니다.

• 공급 업체 번들 크기 (예 : Node_Modules) : 하나의 큰 라이브러리가 지배적입니까?
• 앱 코드 : 구성 요소가 불필요하게 큰 패키지를 가져오고 있습니까?
• 중복 패키지 : 때로는 동일한 LIB의 여러 버전이 포함됩니다.
• Lazy-Loaded Chunks : Loute/Components가 defineAsyncComponent 또는 동적 가져 오기를 사용하여 코드 스플릿을 올바르게 확보하는지 확인하십시오.

동적 수입의 예 :

 const productPage = () => import ( './ views/productPage.vue');

6. vue.config.js에서 예산 설정 (선택 사항)

크기 제한을 시행 할 수 있습니다.

 module.exports = {
  configureWebPack : {
    성능: {
      힌트 : '경고',
      MaxentRypointsize : 512000, // 500kb
      maxassetsize : 300000, // 300kb
    },
  },
};

웹 팩은 자산을 초과하면 빌드에 경고하거나 실패합니다.

기본적으로 시각적 도구를 사용하여 번들에 무엇이 있는지 확인하고 GZIP 크기에 집중하며 큰 종속성을 최적화하십시오 . 정기적 인 분석은 일찍 팽창하는 데 도움이됩니다.

위 내용은 VUE 응용 프로그램의 번들 크기를 분석하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!