减小React / MERN Stack Bundle的大小-主要删除重复的D3

Question

当我运行npm run-script build捆绑React应用程序时，捆绑完成后，将启动以下webpack捆绑分析器，其中显示了我的应用捆绑包括什么：

尽管我对此并不满意，但这似乎是一个相当大的构建，可能会减慢我的应用程序的运行速度。

似乎d3是我捆绑包中最大的部分之一，而且看起来d3被捆绑了两次 -一次单独捆绑，一次与d3-tip捆绑。（我的React应用程序是一个图形/ d3密集型应用程序，在整个应用程序中我使用了多个d3模块。我将d3-tip用作我的图形的工具提示库）。如何解决此问题，使d3仅捆绑一次？而且，如果这将大大提高我的应用程序的速度，那么我如何捆绑仅使用的d3模块而不是全部d3？

我的index.js似乎在右边也很大，我不知道那是否很普通。实际上，对于什么是大型/大型版本，还是小型/紧凑版本，我几乎一无所知。我确实知道我的构建文件夹的大小约为53MB。

。

----编辑-----悬赏前更新帖子。我删除了d3-tip，并切换到使用带有悬停作为工具提示的普通div。这是最新的版本：

...我对赏金的主要问题是：

1：如何只捆绑实际在我的应用中使用的d3，react-spinners等模块？我听说过摇树，但找不到有关如何在应用程序中摇晃d3的好资料。我使用d3的组件通常在前几行中包含以下内容：

import React, { Component } from 'react';
import * as d3 from 'd3';
import * as d3Hexbin from 'd3-hexbin';

class SomeClassHere extends Component { ...

...而且我认为我不再需要以这种方式导入d3，但是我不确定是否只是更改所有导入内容也会更改捆绑包，或者我是否必须做其他事情来删除d3未使用的模块。

2：是否有一个较小的pdf-generation库而不是kendo-react-pdf？同样，还有什么比react-datepicker小吗？我的应用程序中只有一个日期选择器，整个react-datepicker库似乎过分杀了？

3：最后，我应该争取的捆绑包尺寸是多少？捆绑软件的屏幕快照显示了大多数应用程序的统计信息大小，已解析的大小和压缩后的大小（不包括仅是蓝色块，我想这是用/ src编写的代码）。这个大吗

在此先感谢您的帮助！

Answer 1

赏金并没有获得关注，但我想更新一下，分享我在过去几天的努力和学到的知识：

根据此块链接，使用rollup是制作 d3 等库的自定义捆绑包的一种方法。我还没有使用它，但我将查看汇总文档并尝试使用它制作一个较小的 d3 包（这可能具有挑战性，因为我的应用程序使用了数十个 d3 模块）。我乐观地认为它会奏效。

对于反应旋转器，我将简单地删除这个库并在反应中制作我自己的旋转器（只需抓取一个图标并为其设置动画）。从捆绑包中删除一个大型库，并且在没有库的情况下使用 React 创建并不困难。

我也可能会在react中创建我自己的日期选择器，而不是使用react-datepicker。这删除了 ​​2 个并不真正需要的大型依赖项。特别是对于react-datepicker，这主要是1个大模块，因此没有自定义模块创建者会让这个库变得更小。我可能会遵循本教程，因为它看起来合法。

kendo-react-pdf 相当大，但我的应用程序需要“下载到 pdf”功能来生成 1 页 pdf 报告。一般来说- 关于 React 中 pdf 生成的任何建议（指南、教程、库等的链接）都会有帮助。在 React 中构建下载到 pdf 功能的最新库和/或方法是什么？

回顾一下 - 删除库并在 React 中重新创建它们似乎比尝试“摇树”我的应用程序使用的每个库更简单。d3 例外，我将尝试构建一个仅使用我的应用程序所需的 d3 模块的自定义捆绑包。

编辑：我的轨迹是，在帖子的包层次图中，我的包的黄色部分将小于我的包的蓝色部分。到那时，想必缩小捆绑包的唯一方法就是减少我自己的代码？我的应用程序可能有 20K - 30K 行代码，跨所有组件（我相信这是捆绑层次结构图中的蓝色）和容器组件（很多吗？），但如果我花时间重构我可以将其减少大约 30% - 50%