反应组件的文件大小超过700kB是否正常？ 这是编译后的文件大小。
GridComponent.js 732 kB 0 [emitted] GridComponent
main.js 7.97 kB 1 [emitted] main
GridComponent是反应成分。 main是用于比较的正常js。
这是正常的吗？ 我计划只在需要它们的页面中包含反应组件。
答案 0 :(得分：0)
我可以看到您在自己的应用中使用了网络包，而GridComponent.js应该有require('react');（或import React from 'react';，如果使用带有babel的ES6模块）。
当你需要的时候，webpack会加入＆＃34;指定＆＃34;输出＆＃34;中的所有依赖项设置（在webpack.config.js中提供）。因此，如果您检查GridComponent.js的内容，您会看到React在里面。在您的情况下，此GridComponent.js是您的＆＃34;捆绑文件＆＃34; （它将包含您已导入的所有依赖项）。这就是为什么它似乎是＆＃34;大＆＃34;，因为这个文件包含你的组件和React本身（以及其他依赖项）。
当你说＆＃34;我打算只在需要它们的页面中包含反应组件。＆＃34;，我认为你可能想要拆分你的代码，所以你的页面只会加载你需要的东西。您可以在此处查看有关代码拆分的更多信息：
https://webpack.github.io/docs/code-splitting.html
基本＆＃34;分裂＆＃34;战略是分裂您的供应商＆＃34;您的＆＃34; app＆＃34;中的代码代码（https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code）。在你的情况下，React，React DOM和其他＆＃34; common＆＃34;依赖关系将转移到＆＃34; vendor＆＃34;，您的应用程序就是您编写的代码。
但就像提示一样，当您拥有大量代码时，代码拆分只需真正。因为有时候额外的网络请求可能会引入更多的“延迟”＃34;而不是下载几个字节。或者，如果你有一些特殊的＆＃34;缓存策略，因为您的应用程序可能会比您的供应商代码更改更多次（您的供应商代码只会在更改某些依赖项版本时再次下载），并且当您的应用程序中更改了简单的内容时，您可以避免下载大量字节。
我认为这解决了您的问题，但是要在此处添加更多信息，如果您想将代码分发给更多人（即开源项目），您可以分发您的代码并说“好”，然后运行那个，你必须安装那个其他依赖项＆＃34;，你可以用peer dependencies来实现它。
如果不是您的对等依赖项，则可以通过缩小文件来节省一些字节（您可以通过修改webpack配置来实现）。一篇好的博客文章可以在这里找到：
http://moduscreate.com/optimizing-react-es6-webpack-production-build/