React-Data-Grid 捆绑包大小答案

【问题标题】：React-Data-Grid Bundle SizeReact-Data-Grid 捆绑包大小
【发布时间】：2020-02-27 13:36:31
【问题描述】：

我正在尝试 React-Data-Grid，希望生成的包大小会比使用我目前在我的应用程序中使用的 ag-Grid 或 Tabulator 时更小。

我尝试在一个小组件中验证生成的包大小。但出乎意料的是，我的应用程序大小增加了大约 10 MB。而 ag-Grid 或 Tabulator 导致“仅”增加约 2MB。我使用 Laravel 作为后端；我不会更改 Laravel 生成的 webconfig.js，因为默认的 webconfig 对我的应用程序来说已经足够了。上面的结果是我执行命令的时候：

npm run watch

由 Laravel 框架（Laravel Mix）生成的脚本提供。当然，如果我通过执行命令来运行生产模式：

npm run prod

整个尺寸变得更小了。

对于 React-Data-Grid 来说，这个大小增加正常吗？如果是这样，我将忽略这个库，并坚持使用功能丰富的 ag-Grid 和 Tabulator，尽管它们的包大小相对较大。如果没有，我想知道是什么原因造成的。

当我由于使用 3rd 方库而无法减小包大小时，代码拆分将是最后的手段。

【问题讨论】：

标签： size bundle react-data-grid

【解决方案1】：

确实很大，但是如果您使用延迟加载，您的项目将变得易于管理。

作为一个提醒，你可以使用：

const gridList = React.lazy(() => import('./components/gridlist/gridlist'));

并将您的 DataGrid 放入该组件中。 DataGrid 在排序和过滤方面有很多非常好的功能，而且它是免费的。

【讨论】：