巨大的块大小会减慢网站加载速度

Question

我的项目在 React 上的加载速度存在一些问题。我在 Google PageSpeed 上测试了一下，看起来很伤心。

Google PageSpeed 评分

我认为主要问题是chunk.js 文件的大小。

Chink 文件的大小

我尝试使用 React Lazy 来提高加载速度，但值非常低。也许有人可以帮我解决这个问题。我在这个项目中使用 React（没有 Redux）和几个库，其中最大的是 Antd、Stripe 和 Google Analytics。后端在 Node/Express + Psql 上工作，主机：Jenkins。

Answer 1

也许您可以提供更多详细信息，为什么您的捆绑包那么大。

1. 您使用的是自定义 webpack 配置还是 CRA？
2. 您是否在测量生产构建输出？
3. 您是否在 JS 中包含图像？这可以让你的捆绑包变得更高。

我还看到您没有提到 React 路由器，所以我想您没有按路由拆分代码，如果有的话，请查看您的 node_modules 和图像。

您可以做的改进是拆分不必要的包，这些包可以在您访问特定页面或交互时延迟加载。你不需要 G.A.在初始页面加载。我会对 Stripe 说同样的话，只是在结帐页面上。

您可以使用动态导入功能进行代码拆分（需要通过 babel 启用）。 Webpack 提供了一个很好的教程。

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

还可以看看这篇文章： https://webpack.js.org/guides/lazy-loading/