rollup-plugin-visualizer 는 빌드 프로세스 중에 개발자가 파일 크기, 종속성 및 기타 정보를 더 잘 이해할 수 있도록 시각적 빌드 보고서를 생성할 수 있는 롤업 빌드 도구용 플러그인입니다.
플러그인을 사용하면 rollup-plugin-visualizer빌드가 완료된 후 파일 크기, 종속성, 모듈 수 등과 같은 빌드 프로세스 동안의 다양한 통계를 포함하는 대화형 HTML 보고서를 생성할 수 있습니다. 직관적인 뷰 분석, 선버스트(스펙트럼과 같은 원형 계층 그래프), 트리맵(직관적으로 보이고 기본 매개변수이기도 한 직사각형 계층 그래프), 네트워크(그리드 그래프, 뷰 포함) 등 다양한 종속성 분석 모드를 제공합니다. 관계), 원시 데이터(원본 데이터 모드, json 형식), 목록(목록 모드),
rollup-plugin-visualizer이 블로그 는 플러그인을 사용하여 vite+vue3.2의 프로젝트 환경에서 패키징 볼륨 및 종속성과 같은 정보 뷰를 분석하고 건설 프로세스의 성능 병목 현상 및 최적화 방향을 이해하여 성능 및 유지 관리성을 향상시킵니다 . 응용 프로그램 .
공식 주소: https://github.com/btd/rollup-plugin-visualizer
1. 롤업 플러그인 비주얼라이저 설치
먼저 속도를 높이고 싶은 프로젝트를 임의로 찾아 터미널에 들어갑니다.
npm 설치: npm install --save-dev rollup-plugin-visualizer
원사 설치:yarn add --dev rollup-plugin-visualizer
그런 다음 다음과 같이 vite.config.ts에서 플러그인을 구성합니다.구체적으로 먼저 모듈을 가져온 다음 플러그인 모듈을 찾아 거기에 Visualizer 플러그인을 추가합니다.
// 引入rollup-plugin-visualizer模块
import {
visualizer } from "rollup-plugin-visualizer";
export default defineConfig({
plugins: [
vue(),
visualizer({
open:true, //注意这里要设置为true，否则无效
filename: "stats.html", //分析图生成的文件名
gzipSize: true, // 收集 gzip 大小并将其显示
brotliSize: true, // 收集 brotli 大小并将其显示
})
],
})
다른 옵션은 공식 웹 사이트에서 찾을 수 있습니다. (참고: 인터넷에 있는 많은 자습서의 매개 변수는 구식이며 이 자습서는 향후 적용되지 않을 수 있습니다. 공식 웹 사이트 readme를 참조하십시오.)
2. 명령을 실행하여 분석 그래프 패키징 및 생성
프로젝트를 입력하거나 npm run build패키징 vite run build하고 잠시 기다린 후 분석 보기를 생성하면 보기가 자동으로 팝업되고 프로젝트의 루트 디렉토리에 저장됩니다. 파일 이름은 지금 막 매개변수 파일 이름(stats.html)입니다. )
보기 분석에서 사각형이 클수록 파일이 차지하는 공간이 커지고 네트워크 대역폭 및 액세스 속도에 대한 요구 사항이 높아집니다. 웹 사이트에 대용량 파일이 많이 포함되어 있는 경우 사용자는 웹 사이트를 방문할 때 더 많은 데이터를 다운로드해야 하므로 웹 사이트의 로딩 속도가 느려지고 사용자 경험이 저하됩니다.
그에 따라 해당 패키징 결과가 콘솔에 인쇄됩니다.
