Ag-网格包的大小太大了

Question

我正在开发一个带有角6的web应用程序，我有一个Ag网格企业版.Ag-grid文档说，我们必须导入所有的Ag-网格-角，Ag-网格-社区，Ag-网格-企业与Ag-网格企业一起工作。

编译后，主包的总大小超过1.5MB。在这个ag-grid-community是694 KB，ag-grid-enterprise是230 KB：

​

​

这是银栅的正常行为吗？

我使用Ag版本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

在官方文档页面中有一个关于这个主题的深度博客。

最小化束大小

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

E.x.，这是一个反应的例子，但是对于角度和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,
]);

Answer 3

项目AG-1329缩减网格束尺寸 Alberto已经作为ag-Grid v22的一部分实现，于2019年11月发布。这增加了通过包含ag-Grid功能不同方面的模块导入ag-Grid的选项。这允许您只为实际使用的功能导入模块，从而减少ag-Grid包的大小。

详细介绍了这种方法，可以导入的模块列表如下所示：https://www.ag-grid.com/documentation/javascript/modules/

我们使用ag-Grid构建了一个Vue项目来演示这种方法，只使用以下模块：@ag-grid-community/core和@ag-grid-community/infinite-row-model -请在这里下载这个示例Vue项目：https://1drv.ms/u/s!AljcY8dewwaBnFPXn7V9eNjNM-wX?e=h8TnD0

上面这个示例项目的包大小只有1.0MB，与使用所有ag-Grid企业功能的完整ag-Grid包的1.8MB相比。

可以通过为附加的Vue项目运行以下命令来验证产生的包大小: npm & npm运行构建& npm运行构建:report

请遵循此方法，只加载用于减少包大小的ag-Grid模块。您可以在这里看到模块的完整列表：https://www.ag-grid.com/documentation/javascript/modules/