Ag-grid束太大

Question

我正在使用Angular 6开发Web应用程序。我有一个Ag-grid企业版。Ag-grid文档说，我们必须导入所有ag-grid-angular，ag-grid-community和ag-grid-enterprise才能与Ag-grid企业合作。

编译后，主捆绑包的总大小超过1.5 MB。其中，ag-grid-community为694KB，ag-grid-enterprise为230KB ：

这是Ag-grid的正常行为吗？

我正在使用Ag-grid版本19.0.0和以下命令进行构建：

ng build --prod --aot --build-optimizer --vendor-chunk=true

Answer 1

这是我们知道的事情，我们在我们的积压工作中

项目结构改进 AG-1329 减少网格包大小（通过摇树）

你可以在这里看到我们的管道：

https://www.ag-grid.com/ag-grid-pipeline/

请注意，鉴于其复杂性，我们没有任何计划在短期内进行任何改进，但我们希望最终能够提供一个小包

我建议如果您是客户，请直接联系 ag-grid 支持以获取更多信息

希望这可以帮助

Answer 2

官方文档页面中有一篇关于此主题的深入博客。

最小化捆绑包尺寸

基本上，我们使用模块而不是包。通过这样做，我们将只包含我们需要的内容。

Ex 这是一个 React 示例，但 Angular 和 Vue 的主要逻辑也相同。

在你的 package.json 中，而不是这个

"ag-grid-community": "^27.0.1",
"ag-grid-react": "^27.0.1",

用这个

"@ag-grid-community/core": "^28.1.0",
"@ag-grid-community/react": "^28.1.0",
"@ag-grid-community/client-side-row-model": "^28.1.0",
"@ag-grid-community/styles": "^28.1.0",

并在您的页面中，更改您的导入

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

对此

import { AgGridReact } from '@ag-grid-community/react';
import '@ag-grid-community/styles/ag-grid.css';
import '@ag-grid-community/styles/ag-theme-alpine.css';

import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
]);