javascript - 减少 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 等模块？我听说过 tree-shaking，但找不到关于如何在应用程序中摇树 d3 的好资源。我使用 d3 的组件通常在前几行中包含以下内容：

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

class SomeClassHere extends Component { ...

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

2：有没有更小的pdf-generation库可以使用，而不是 kendo-react-pdf？同样还有比 react-datepicker 更小​​的东西吗？我的应用程序中只有一个日期选择器，而整个react-datepicker库似乎有点矫枉过正？

3：最后，我应该争取的捆绑包尺寸是多少？捆绑包的屏幕截图显示了大多数应用程序的统计大小、解析大小和压缩大小（不包括我认为是我在 /src 中编写的代码的蓝色块？）。这个大吗？

提前感谢您对此的帮助！！

标签： javascriptreactjsd3.jsbuild

Answer 1

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

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

对于 react-spinners，我将简单地删除这个库并在 react 中制作我自己的微调器（只需抓住一个图标并为其设置动画）。从包中删除一个大型库，并且在没有库的情况下使用 react 创建并不难。

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

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

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

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