当我运行 npm run-script build 来捆绑我的 React 应用程序时，一旦 bundle 完成，以下 webpack bundle 分析器就会启动，它会显示我的应用程序 bundle 的组成:
虽然我对此并不乐观，但这似乎是一个相当大的构建，这可能会减慢我的应用程序的速度。
d3 似乎是我的 bundle 中最大的部分之一，而且似乎 d3 被捆绑了两次 - 一次单独捆绑，一次与 d3-tip 捆绑。 (我的 React 应用程序是一个图形/d3 密集型应用程序，我在整个应用程序中使用了几个 d3 模块。我使用 d3-tip 作为我的图表工具提示库)。我该如何解决这个问题，以便 d3 只捆绑一次？而且，如果它可以显着提高我的应用程序的速度，我如何才能捆绑只捆绑我使用的 d3 模块，而不是捆绑所有 d3？
我的 index.js 在右边看起来也很大，我不知道这是否普通。事实上，我对什么是大型/笨重的构建与小型/紧凑的构建几乎一无所知。我确实知道我的构建文件夹的大小约为 53MB。
.
----EDIT ----- 在赏金之前更新帖子。我删除了 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，但我不确定是否简单地更改所有导入也会更改 bundle ，或者我是否必须做其他事情删除未使用的模块。
2: 是否有更小的 pdf-generation 库可供使用，而不是 kendo-react-pdf？同样还有比 react-datepicker 更小的东西吗？我的应用程序中只有一个日期选择器，而整个 react-datepicker 库似乎有点矫枉过正？
3:最后，我应该争取的 bundle 尺寸是多少？ bundle 的屏幕截图显示了大多数应用程序的 stat 大小、解析大小和 gzip 大小(不包括我认为是我在/src 中编写的代码的蓝色 block ？)。这么大吗？
在此先感谢您的帮助!
最佳答案
Bounty 没有获得吸引力，但我想更新一下，与我在过去几天的努力和学到的知识分享:
根据 this blocks link , 使用 rollup是一种制作像 d3 这样的库的自定义包的方法。我还没有使用它，但我会查看汇总文档并尝试使用它制作一个更小的 d3 包(这可能具有挑战性，因为我的应用程序使用了几十个 d3 模块)。我很乐观，它会奏效。
对于 react-spinners，我将简单地删除这个库并在 react 中制作我自己的微调器(只需抓取一个图标并为其设置动画)。从 bundle 中移除一个大型库，并且在没有库的情况下使用 react 创建并不难。
我也可能会在 react 中创建自己的日期选择器，而不是使用 react-datepicker。这消除了 2 个并不真正需要的大型依赖项。特别是使用 react-datepicker，这主要是 1 个大模块，因此没有自定义模块创建者会使这个库更小。我可能会关注 this tutorial因为它看起来合法。
kendo-react-pdf 非常庞大，但我的应用程序需要“下载到 pdf”功能来生成 1 页 pdf 报告。 一般而言 - 任何关于在 react 中生成 pdf 的建议(指向指南、教程、库等的链接)都会有所帮助。在 react 中构建下载到 pdf 功能的最新库和/或方法是什么？
回顾一下 - 删除库并在 react 中重新创建它们似乎比尝试“摇树”我的应用程序使用的每个库更简单。 d3 异常(exception)，我将尝试构建一个仅使用我的应用所需的 d3 模块的自定义包。
编辑:我处于一个轨迹上，在帖子的捆绑层次结构图中，我的 bundle 的黄色部分将小于我 bundle 的蓝色部分。到那时，大概使捆绑更小的唯一方法是减少我自己的代码？我的应用程序的所有组件(我相信这是捆绑层次结构图中的蓝色)和容器组件(很多吗？)可能有 20K - 30K 行代码，但如果我要花时间重构事情，我可以减少大约 30% - 50%
关于javascript - 减少 React/MERN Stack Bundle 的大小 - 主要是删除重复的 D3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56247964/
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html
我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的
在Ruby中是否有Gem或安全删除文件的方法？我想避免系统上可能不存在的外部程序。“安全删除”指的是覆盖文件内容。 最佳答案 如果您使用的是*nix，一个很好的方法是使用exec/open3/open4调用shred:`shred-fxuz#{filename}`http://www.gnu.org/s/coreutils/manual/html_node/shred-invocation.html检查这个类似的帖子:Writingafileshredderinpythonorruby?
我正在尝试找到一种方法来规范化字符串以将其作为文件名传递。到目前为止我有这个:my_string.mb_chars.normalize(:kd).gsub(/[^\x00-\x7F]/n,'').downcase.gsub(/[^a-z]/,'_')但第一个问题:-字符。我猜这个方法还有更多问题。我不控制名称，名称字符串可以有重音符、空格和特殊字符。我想删除所有这些，用相应的字母('é'=>'e')替换重音符号，并将其余的替换为'_'字符。名字是这样的:“Prélèvements-常规”“健康证”...我希望它们像一个没有空格/特殊字符的文件名:“prelevements_routin
Region是HBase数据管理的基本单位,region有一点像关系型数据的分区。region中存储这用户的真实数据，而为了管理这些数据，HBase使用了RegionSever来管理region。Region的结构hbaseregion的大小设置默认情况下，每个Table起初只有一个Region，随着数据的不断写入，Region会自动进行拆分。刚拆分时，两个子Region都位于当前的RegionServer，但处于负载均衡的考虑，HMaster有可能会将某个Region转移给其他的RegionServer。RegionSplit时机：当1个region中的某个Store下所有StoreFile
我去了这个website查看Rails5.0.0和Rails5.1.1之间的区别为什么5.1.1不再包含:config/initializers/session_store.rb？谢谢 最佳答案 这是删除它的提交:Setupdefaultsessionstoreinternally,nolongerthroughanapplicationinitializer总而言之，新应用没有该初始化器，session存储默认设置为cookie存储。即与在该初始值设定项的生成版本中指定的值相同。 关于
我在一段非常简单的代码(如我所想)中得到了一个错误的值:org=4caseorgwhenorg=4val='H'endputsval=>nil请不要生气，我希望我错过了一些非常明显的东西，但我真的想不通。谢谢。 最佳答案 这是典型的Ruby错误。case有两种被调用的方法，一种是你传递一个东西作为分支的基础，另一种是你不传递的东西。如果您确实在case中指定了一个表达式语句然后评估所有其他条件并与===进行比较.在这种情况下org评估为false和org===false显然不是真的。所有其他情况也是如此，它们要么是真的，要么是假的。