javascript - 一个简单的 Counter React 应用超过 100MB 这正常吗？

Question

我是 React.js 的新手，为了练习，我制作了一个简单的计数器 Web 应用程序。但我注意到该项目超过 120MB。是否可以？我需要做些什么来缩小它吗？

Answer 1

120mb 可以很大，也可以什么都没有，这取决于你从哪里得到这个数字。请记住，现代 Web 应用程序(例如使用 React 构建的应用程序)需要构建工具，通常还需要开发服务器等。另外，如果您使用 typescript，它本身会添加一个高达 40mb 的编译器。

因此，如果我们查看源目录，您将拥有自己的代码以及一些构建配置(可能在 webpack 配置文件中)，总共有几千字节。但是我们有 node_modules 文件夹，其中包含您自己的代码和构建工具的所有依赖项。这不是问题，因为该文件夹不会发送到客户端，您甚至不应该将其提交到 SCM，因为它可以从您的packages.json 文件中恢复。

我在一个新的 dotnet-react 项目中快速检查了 node_modules 中的文件夹大小(因为这是我方便的)，这就是我得到的。

在这里我们可以看到，TypeScript 是迄今为止最大的依赖项，占用了我项目的近 25%，而且仍然还有相当多的其他大型依赖项。但这只是为了

如果我们另一方面看看实际交付给客户的内容，那应该是完全不同的事情。这才是真正重要的，因为这将直接影响应用程序的性能。这里的大型应用程序将需要下载更多代码，并为客户端解析更多代码。

运行项目进行开发并在 Chrome Inspector 中检查网络流量时，该应用看起来如下所示。

这里我们可以看到三个脚本文件，但即使在开发模式下，也只有大约 520kb 被发送到客户端，尽管我的 node_modules 约为 180mb。

如果我们更进一步，将其构建用于生产，我们会得到更好的结果。

现在我们的脚本大小已减少到大约 270kb，这只是项目文件夹大小的一小部分。

总结一下:

• 在使用 React(或 Angular、Vue、Ember 等)等现代客户端框架时，这个大小是完全可能的，也是预期的。
• 由于构建项目所需的所有依赖项，开发文件夹将会很大。
• 最终输出会小得多，但最终取决于您决定在自己的代码中使用哪些依赖项。
• 您无需执行任何缩减操作，只需确保不将 node_modules 提交到 SCM 即可。
• 另请记住，所有现代框架都需要一定的开销来设置所有内容并使其易于使用。这是我的测试应用程序 260kb 的大部分。因此，如果你制作一个简单的计数器，相比之下，开销将是极大的，而且并非所有项目都需要像 React 这样的框架。