Webpack构建完成后页面加载时间过长

Question

我们在一个非常庞大的单体架构中使用了 create-react-app（带有 react-app-rewired）。我们对构建时间进行了一些改进（将其缩短到约20秒），但是在完成构建（使用 yarn start）之后，应用程序需要大约2分钟才能在浏览器上实际加载。

在 app.jsx 中，我尝试删除所有根代码并只呈现典型的“Hello World”p标记，它不需要如此长的时间。我还在构建文件夹前面运行了一个基本的 Web 服务器，并使用serve ，这表明可能是 webpack-dev-server 在处理应用程序大小时存在问题（或者它是否在构建之前就已经构建完成？）。

在 Chrome 开发工具网络选项卡中，阻止页面加载的资产是来自 static/js 文件夹的文件。 这里是 webpack-bundle-analyzer 的结果的 gist。

有人有任何想法，可以追踪这个问题的根源，并改善构建后的加载时间吗？

- WillKre

---

编译后的文件有多大？您可以尝试运行 webpack --profile --json > webpack-stats.json。还有一些网站，例如 https://chrisbateman.github.io/webpack-visualizer/ 和 https://webpack.github.io/analyse/，您可以上传该 json 文件以获得依赖关系的可视化图形。 - Dmitry S.

构建时间取决于webpack打包源文件的时间，这也取决于您使用的加载器和插件。请参阅webpack如何优化构建时间。 至于在您的网络选项卡中从static/js阻止资产-如果文件太大无法加载-请尝试进行代码拆分。 - choz

请提供尺寸、文件数量等信息。 - Janos Vinceller

请在信息中包括有关webpack-bundle-analyzer或source-map-explorer的捆绑大小和统计详细信息。 - Hamid

你尝试过在webpack中使用extractCssPlugin和UglifyJsPlugin吗？ - Hamid

Answer 1

了解代码分割...

https://webpack.js.org/guides/code-splitting/

它可用于实现更小的包和控制资源加载优先级，如果使用正确，可以对加载时间产生重大影响。

- svey

Answer 2

我看到你的构建中有很多 node_modules。它们都是必需的吗？你拥有的越多，所需时间就越长。

源代码

- Basil Nagle