javascript - 一个简单的反反应应用程序超过 100MB 是否正常？

Question

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

Answer 1

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

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

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

所以在这里我们可以看到，typescript 是迄今为止最大的依赖项，几乎占据了我项目的 25%，而且还有很多其他大型依赖项。但这只是为了

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

在 Chrome Inspector 中运行开发项目和检查网络流量时，这个应用看起来像这样。

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

如果我们再进一步，为生产构建它，我们会得到更好的结果。

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

所以总结一下：

• 当与 React（或 Angular、Vue、Ember 等）等现代客户端框架一起工作时，该大小是非常可能的，并且有点预期。
• 由于构建项目所需的所有依赖项，开发文件夹将很大。
• 最终输出会更小，但最终取决于您决定在自己的代码中使用的依赖项。
• 你不必做任何事情来缩小，只要确保你不承诺node_modules你的 SCM。
• 还要记住，所有现代框架都带有开销来设置所有内容并使其易于使用。这是我的测试应用程序的 260kb 的大部分。所以如果你做一个简单的计数器，相比之下开销会很大，而且并不是所有的项目都需要像 React 这样的框架。