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

Question

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

谷歌 PageSpeed 评级

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

Chink 文件的大小

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

标签： javascriptreactjswebwebpack

Answer 1

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

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

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

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

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

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

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