减少React / MERN堆栈束的大小-主要是去除重复的D3

Question

当我运行npm run-script build来捆绑我的React应用程序时，一旦包完成，下面的webpack包分析器就会启动，它显示了我的应用程序包由什么组成：

​

​

虽然我对此并不乐观，但这似乎是一个相当大的构建，可能会减慢我的应用程序。

看来d3是我的捆绑包中最大的部分之一，而且d3也被捆绑了两次--一次是单独的，一次是与d3-技巧捆绑的。(我的React应用程序是一个图形/ d3密集型应用程序，我在整个应用程序中使用了几个d3模块。我使用d3提示作为我的图形的工具提示库)。我如何解决这个问题，使d3只能捆绑一次呢？而且，如果它能大大提高我的应用程序的速度，我如何才能将绑定到我使用的d3模块，而不是所有的d3？

我的index.js在右边看起来也很大，我不知道这是不是普通的。事实上，对于什么是大/大的构建，还是小/紧凑的构建，我几乎不知道。我知道我的构建文件夹的大小是53 my。

。

--编辑--更新赏金之前的帖子。我删除了d3提示，转而使用普通的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 { ...

...and --我想我不再需要以这种方式导入d3了，但是我不确定简单地改变所有导入是否也会改变包，或者我是否需要做一些其他的事情来删除没有使用的模块。

2:是否有一个更小的pdf-generation库可供使用，而不是kendo？同样的，是否有比反应更小的东西-数据报警器？我的应用程序中只有一个数据报警器，而整个react-datepicker库似乎有点过火了？

3:最后，我应该争取的捆绑包的大小是多少？该包的屏幕截图显示了大部分应用程序的stat大小、解析大小和压缩大小(不包括蓝色块，我认为这是我用/src编写的代码)。这个很大吗？

提前感谢您的帮助！！

Answer 1

赏金并没有增加吸引力，但我想更新一下，在过去的几天里，与我的工作和学习知识分享：

按照这会阻塞链接，使用卷起是为库(如d3 )定制包的一种方法。我还没有使用它，但我将查看汇总文档，并尝试使用它构建一个更小的d3包(由于我的应用程序使用了数十个d3模块)，这可能是一项挑战。我乐观地认为它会起作用。

对于react旋转器，我将简单地移除这个库并制作我自己的旋转器react(只需抓取一个图标并将其动画化)。从包中移除一个大型库，在没有库的情况下创建react并不难。

我也可能会在react中创建自己的数据报警器，而不是使用react datepicker。这消除了两个不需要的大型依赖项。特别是与react datepicker，这主要是一个大模块，所以没有定制模块创建者将使这个库更小。我可能会跟随本教程，因为它看起来是合法的。

kendo-react非常庞大，但是我的应用程序需要一个生成1页pdf报告的“下载到pdf”功能。In -任何关于pdf生成的建议(指向指南、教程、库等)会有帮助的。什么是最新的库和/或方法，以建立下载到-pdf功能的反应？

回顾一下移除库，并在react中重新创建它们，似乎比尝试“树摇”我的应用程序使用的每个库简单得多。在例外情况下，我将尝试构建一个只使用我的应用程序所需的d3模块的自定义包。

编辑：I所处的轨迹中，在post中的包层次图中，我的包的黄色部分将小于包中的蓝色部分。在这一点上，大概使包更小的唯一方法是减少我自己的代码？我的应用程序可能跨越所有组件(我相信这是包层次图中的蓝色代码)和容器组件(这是很多吗？)的代码行，但是如果我花时间重构东西，我可以将其减少30% - 50%。