此页面的目的是为如何处理生产网站的性能优化问题提供更多建议。

您似乎尝试在 React 中使用 React.lazy} 和 suspense} 在 React 生产网站上划分捆绑块；但是，这并没有给您的网络性能得分带来预期的改善。

但是为什么会这样呢？

鉴于您的制作网站需要一些额外的东西......

我最近被分配了一项职责来提高生产网站的性能。我最初认为我们应该更懒地加载每条路线，但我很快意识到这已经完成了。

我也开始想知道接下来会发生什么。

我安装了 webpack 捆绑分析器插件并尝试分析之后的每个部分。随后，我就如何提高性能提出了很多建议。

Main.bundle.js
主包大小太大，导致下载时间和解析时间增加。

如何破解main.bundle.js？
就我而言，我的主包有很多与翻译相关的 json，主包大小增加了 1.5 MB。

我确实使用 main.js 包中的延迟导入取消了翻译。这提供了 40% 的性能得分优化。但这还没有完成，因为我们的灯塔性能得分仅达到 25 到 35。

然后我开始查看其他潜在的大文件。

其中之一是 moment js，它有许多我们的网站没有使用的语言环境。用轻量级库替换 moment js 是解决此问题的一种方法，但这样做将需要更多代码修改并增加我测试整个网站的工作量（这是我以前没有做过的事情），这可能会导致更多错误。然后我决定弄清楚如何摆脱那些不需要的区域；幸运的是，webpack 插件已经可用。通过利用该插件 [ContextReplacementPlugin]，我能够最小化 moment.js 文件的大小。

敬请关注，更多内容即将推出...谢谢