AG 메쉬:어플리케이션 패키지 크기 최소화

이 문서에서는 AG Grid를 사용할 때 응용 프로그램 패키지 크기를 최소화하는 방법을 보여 줍니다.특히 느린 네트워크에서 페이지의 마운트 시간을 높이려면 이 점이 중요하다.번들 크기가 어플리케이션의 특별한 관심사가 아닌 경우, 즉 어플리케이션이 고속 내부 네트워크를 통해서만 서비스를 제공하는 경우, AG 그리드를 포함하는 가장 간단한 방법도 자세히 설명합니다.

AG 전력망 용어
우리가 시작하기 전에, 중요한 것은 본 문서를 읽을 때 헷갈리지 않도록 AG 격자 용어를 포함하는 것이다.응용 프로그램에 AG Grid를 포함할 경우 패키지와 모듈을 두 가지 옵션 방법으로 부릅니다.이 용어들은 코드를 발표하거나 사용하는 방식과 상관없이 다시 불러옵니다.이러한 용어를 CJS, ESM, UMD 등의 다른 Javascript 모듈 형식과 혼동하지 마십시오.
가방에 대해 우리는 npm가방ag-grid-community과 ag-grid-enterprise을 가리키는데 각각 모든 지역사회/기업 기능을 포함한다.패키지는 패키지에 포함된 모든 AG 메쉬 기능으로 간주되므로 패키지라고 합니다.그들은 모든 물건을 다 싸서 출발할 준비를 했다.Packages Overview
모듈에 따라 우리는 @ag-grid-community/*** 또는 @ag-grid-enterprise/***(즉 @ag-grid-enterprise/row-grouping와 일치하는 범위 내의 npm 패키지를 가리킨다.이것들은 모두 단독 격자 특성으로 자신의 가방에 포장된 것이다.우리는 이미 격자 기능 모듈을 단독 모듈로 바꾸어서 당신이 필요로 하는 내용만 포함할 수 있습니다.Modules Overview


어떻게 소포 크기를 최대한 줄입니까
패키지의 크기를 최소화하려면 AG Grid Modules 프로그램에 필요한 기능만 포함하는 코드를 사용해야 합니다.예를 들어, 응용 프로그램에서 Excel로 파일을 내보낼 필요가 없을 수 있으므로 이를 지원하는 코드를 포함하지 않아도 됩니다.

AG 그리드 모듈
모듈을 사용하는 첫 번째 단계는 응용 프로그램에 어떤 모듈이 필요한지 결정하는 것이다.이 페이지documentation에는 AG Grid에서 지원하는 각 기능 모듈이 나열되어 있습니다.

이름만 잘 보이지 않으면 모듈 옵션을 선택하여 특정 코드에 어떤 모듈이 필요한지 확인할 수 있습니다.그리고 원본 코드를 보면 필요한 모듈을 가져오는 것을 볼 수 있습니다.

본 문서에서 우리는 응용 프로그램이 다음과 같은 기능만 필요로 한다고 가정한다.

모든 데이터가 클라이언트(ClientSideRowModel)에 로드됨

집합을 사용하여 데이터를 그룹화(RowGroupingModule)

설정 필터(SetFilterModule)

필터 행 사용

필요한 모듈 설치
첫 번째 단계는 위에서 열거한 모든 모듈에 npm 패키지를 가져오는 것입니다.우리의 package.json 파일에는 다음과 같은 AG Grid 패키지만 포함되어야 합니다.

"dependencies": {
    "@ag-grid-community/client-side-row-model" : "^27.0.0",
    "@ag-grid-enterprise/row-grouping" : "^27.0.0",
    "@ag-grid-enterprise/set-filter" : "^27.0.0",
}

Make sure you have not accidentally included any other AG Grid package, especially not ag-grid-community or ag-grid-enterprise when working with modules as they will dramatically bloat your bundle size!

프레임을 사용하는 경우 관련 프레임 모듈@ag-grid-community/angular, @ag-grid-community/react 또는 @ag-grid-community/vue3 중 하나가 포함됩니다.@ag-grid-community/core에 모듈을 명확하게 포함하지 않았음에도 불구하고 모듈의 의존항으로 설치되어 있음을 알 수 있습니다.어떤 기모 도구에 필요한 것을 발견할 수 있기 때문에 자유롭게 그것을 포함할 수 있습니다.

등록 모듈
이제 모듈을 설치했으며 AG Grid 애플리케이션에 모듈을 등록합니다.이 점을 실현할 수 있는 두 가지 방법이 있다.package.json 전역적으로 등록할 수도 있고, 격자 실례에 전달할 수도 있습니다. 이 실례는 전역적으로 등록할 수 있습니다.전체 설명/프레임별 세부 정보는 Registering AG Grid Modules을 참조하십시오.
다음은 전역 등록 모듈의 코드입니다.모든 격자를 실례화하기 전에 이 코드를 실행해야 합니다. 그렇지 않으면 모듈이 사용할 수 없다고 불평할 것입니다.

import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
import { RowGroupingModule } from "@ag-grid-enterprise/row-grouping";
import { SetFilterModule } from "@ag-grid-enterprise/set-filter";

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    RowGroupingModule,
    SetFilterModule
]);

이렇게격자를 줄 그룹을 나누고 필터를 설정할 수 있으며 격자의 모든 다른 핵심 기능을 사용할 수 있도록 설정합니다.

기능 모듈 없음
사람들이 모듈을 사용할 때 보편적으로 걱정하는 것은 어떤 모듈을 포함해야 할지 모른다는 것이다.대부분의 경우 기능을 활성화했지만 필요한 모듈이 제공되지 않은 경우 AG Grid에서 경고합니다.예를 들어, 열 정의에 ModuleRegistry 플래그를 추가했지만 rowGroup가 포함되지 않은 경우 다음 콘솔 경고가 표시됩니다.

​ AG Grid: rowGroup is only valid with AG Grid Enterprise Module @ag-grid-enterprise/row-grouping - your column definition should not have rowGroup

이 규칙의 주요 예외는 RowGroupingModule와SetFilterModule이다.MenuModule가 있는 경우 기본 필터는 간단한 텍스트 필터가 아닌 설정 필터로 바뀝니다.마찬가지로 SetFilterModule가 있는 경우 격자를 마우스 오른쪽 버튼으로 클릭하면 브라우저 메뉴 대신 격자의 컨텍스트 메뉴가 표시됩니다.


패키지에서 기능 모듈로 전환하는 경우 원하는 모든 기능을 사용하여 원하는 모듈이 누락되지 않았는지 확인합니다.

패키지: 모든 기능만 원합니다.
프로그램 패키지 크기를 최소화하는 것이 우선순위가 아니라면 AG Grid 패키지를 더 좋아할 것입니다.패키지MenuModule와 ag-grid-community는 비교적 간단합니다.너의 소포.json 파일은 이 의존항만 포함합니다. (프레임워크 패키지 ag-grid-enterprise, ag-grid-angular, ag-grid-react.

"dependencies": {
    "ag-grid-community" : "^27.0.0",
    "ag-grid-enterprise" : "^27.0.0",
}

유일한 다른 단계는 모든 enterprise 기능을 한꺼번에 사용할 수 있도록 enterprise 패키지를 가져오는 것입니다.

import `ag-grid-enterprise`;

이렇게!패키지가 등록되므로 모듈을 등록할 필요가 없습니다.보시다시피 개발자의 체험을 더욱 간단하게 하고, 모든 새로운 기능이 응용 프로그램에 즉시 사용될 수 있음을 의미합니다.
예를 들어 최근에 추가된Sparklines 기능은 구축 변경 없이 사용할 수 있으며 이는 패키지에 모듈을 추가해야 하는 모듈과 다르다.json 파일, 그것도 등록해야 한다는 것을 기억하세요.

모듈 및 번들 크기
우리의 예시에 구체적인 데이터를 제공하기 위해서, 우리는 두 개의 React 응용 프로그램에 상기 기능을 가진 격자를 설치했고, 하나는 사용 패키지, 하나는 사용 모듈을 설치했다.보시다시피 저희가 필요로 하는 기능만 포함하면 최종 응용 프로그램 패키지 크기가 감소ag-grid-vue3합니다.
모듈
포장하다
% 감소
메인 파이프를 압축하다.js
300 kB
520 kB
43%

소포 크기

> [email protected] build
Creating an optimized production build...
File sizes after gzip:
  520.0 kB  build/static/js/main.3c41a45e.js
  27.77 kB  build/static/css/main.2e8b3952.css
  1.79 kB   build/static/js/787.20674135.chunk.js

모듈 번들 크기

> [email protected] build
Creating an optimized production build...
File sizes after gzip:
  300.0 kB  build/static/js/main.d50bef7e.js
  28.1 kB   build/static/css/main.f1ce7d1f.css
  1.78 kB   build/static/js/787.eaa7384c.chunk.js

AG Grid Bundle Size Github Repo를 사용하면 Angular, React, Vue에 사용되는 패키지 vs 모듈 응용 프로그램을 자유롭게 실험할 수 있습니다.
물론 프로그램이 실현할 수 있는 축소는 필요한 기능의 수량에 달려 있기 때문에 패키지의 크기에 관심이 있다면 시도해 볼 만하다.

모든 모듈 패키지에 대한 주의사항
npm를 검색할 때, 소프트웨어 패키지 43% 와 @ag-grid-community/all-modules 를 만났을 수도 있고, 이것들이 무엇인지 알고 싶을 수도 있습니다.이것들은 뒤로 호환되기 위해 제공되었지만 더 이상 추천하지 않습니다.이 패키지는 다른 모든 모듈을 포함하는 패키지이지만 해당 패키지처럼 등록되지 않습니다.그것들은 아직 불안정하기 때문에 한두 가지 기능만 가져올 수 있어도 결국 모든 코드를 포함할 것이다.
이러한 모듈 중 하나를 사용하는 경우에는 번들 크기에 영향을 주지 않고 번들로 전환하는 것이 좋습니다.또는 필요한 기능을 심사하고 그 모듈만 가져오고 등록하면 프로그램의 패키지 크기를 줄일 수 있습니다.

결론
우리는 응용 프로그램에만 필요한 AG 격자 기능을 포함해서 응용 프로그램 패키지의 크기를 줄이는 방법을 이미 알고 있다.이것은 확실히 더 많은 개발자의 노력이 필요하기 때문에 반드시 그것이'가치'한지 고려해야 한다. 그렇지 않으면 우리 소프트웨어 패키지의 단순성과 완전한 기능 집합을 누릴 수 있다.
자세한 내용은 설명서Build 섹션을 참조하십시오.