trpc 스크립트의 롤업 플러그인 분석기 사용법

이전 글에서는 analyzeSizeChange.ts 파일의 함수에 대한 머릿속 그림을 제공했는데, 이번 글에서는 실제 크기 변화가 어떻게 분석되는지 알아보겠습니다.

import analyze from 'rollup-plugin-analyzer';
export default function analyzeSizeChange(packageDir: string) {
 let analyzePluginIterations = 0;
 return analyze({
   summaryOnly: process.env.CI ? undefined : true,
   skipFormatted: process.env.CI ? true : undefined,
   onAnalysis: (analysis) => {
   },
 });
}

rollup-plugin-analyzer에서 분석을 가져옵니다. 옵션이 포함된 매개변수로 개체가 있습니다.

1. summaryOnly — 번들 요약 및 모듈 사용량 막대 그래프만 출력합니다

2. skipFormatted — 형식화된 문자열을 출력하지 않습니다

3. onAnalytic — 분석 객체와 함께 호출되는 콜백(npm에서 onAnalytic에 대한 아래 설명을 복사했습니다.)

함수는 다음을 사용하여 호출됩니다.

- 분석오브젝트(객체)

- BundleSize(숫자) — 렌더링된 번들 크기(바이트)

- BundleOrigSize(숫자) — 원본 번들 크기(바이트)

- BundleReduction(숫자) — 렌더링된 번들 크기 감소 비율

- moduleCount(Number) — 포함된 모든 모듈의 수

- 모듈(Array) — 모듈 분석 객체의 배열

- 모듈(객체)

- id (문자열) — 모듈 경로 / 롤업 모듈 ID

- 크기(숫자) — 렌더링된 모듈 코드의 크기(바이트)

- origSize (숫자) — 모듈의 원래 코드 크기(바이트)

- 종속 항목(배열) — 종속 모듈 ID/경로 목록

- 백분율(숫자) — 전체 번들에 대한 모듈 크기의 백분율

- 감소(숫자) — 렌더링된 크기 감소 비율

- renderExports(배열) — 사용된 명명된 내보내기 목록

-removedExports(배열) — 사용되지 않은 명명된 내보내기 목록

analyzeSizeChange 파일에서 실제로 얼마나 많은 옵션이 사용되는지 살펴보겠습니다.

- 번들 크기

- 모듈

analyzeSizeChange.ts에서 사용되는 것으로 확인되었습니다

그런데 이 스크립트는 어떤 상황에서 실행되나요? 코드를 체크인한 후인가요? 풀 요청에 대해 보고합니까? 그것을 알아내려면 코드가 안내하는 곳으로 가야 합니다.

analyseSizeChange가 어디에 사용되는지 보려면 먼저 analyzeSizeChange를 검색해야 합니다. script/getRollupConfig.ts

다음으로 getRollupConfig가 사용되는 위치를 찾아야 합니다. 많은 패키지에 사용됩니다.

packages/client/rollup.config.ts를 선택했는데 이 롤업 구성이 빌드 스크립트에 사용되었습니다.

"scripts": {
 "build": "rollup - config rollup.config.ts - configPlugin rollup-plugin-swc3",

그러니까 tRPC 소스 코드로 패키지를 빌드하면 번들 크기가 변경된다는 것입니다.

회사 소개:

Thinkthroo에서는 대규모 오픈소스 프로젝트를 연구하고 아키텍처 가이드를 제공합니다. 우리는 귀하의 프로젝트에서 사용할 수 있는 tailwind로 구축된 resubale 구성 요소를 개발했습니다. Next.js, React, Node 개발 서비스를 제공합니다.

귀하의 프로젝트에 대해 논의하기 위한 회의를 예약하세요.

참고자료:

1. https://github.com/trpc/trpc/blob/next/scripts/analyzeSizeChange.ts

2. https://github.com/search?q=repo:trpc/trpc getRollupConfig&type=code

3. https://github.com/trpc/trpc/blob/3388c9691d122b9d4047b2de0caedcdf611354ab/packages/client/rollup.config.ts#L3

4. https://github.com/trpc/trpc/blob/3388c9691d122b9d4047b2de0caedcdf611354ab/scripts/getRollupConfig.ts#L9

5. https://www.npmjs.com/package/rollup-plugin-analyzer#options

위 내용은 trpc 스크립트의 롤업 플러그인 분석기 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!