何时进行代码拆分(React- Suspense 和 Lazy)

When to code split (React- Suspense and Lazy)

我应该考虑以多少 KB 为单位进行拆分?在什么时候重量变得太重以至于我应该把它分开。我没有拆分的整个包大约有 800KB,所以加载速度相对较快。我只是想弄清楚它是否应该在 10KB/100KB 左右,等等......Moment.js 大约需要 50KB,所以我想弄清楚是否应该拆分所有包含 moment 的模块。

如果我不进行代码拆分,这是否意味着总体上它会在用户加载初始页面后提供更好的用户体验,因为其他所有页面的加载速度都会更快?我知道这会导致加载页面的初次体验不佳,但我只是想权衡取舍。

没有找到任何关于此信息的好资源。我正在使用 create react 应用程序。

800kb 不是特别大,但您的包越小越好。

我认为只有一个包的主要问题是,如果您在您的应用程序中更改一个字符,您的所有客户都需要重新下载所有内容。

举个例子:

  • 您发现您的代码中有错别字。您已经有成千上万的用户下载了带有此拼写错误的 800kb 捆绑包。
  • 您推送了一个修复程序(仅更改了一个字符)。
  • 您的所有用户都需要再次下载整个包(是的,他们需要再次下载 Moment.js)。无论是 1*800kb 还是 8*100kb,他们仍然需要下载 800kb 的数据。 (related question)

您想要做的是以一种允许用户仅下载更改的文件的方式拆分您的块。对于其他文件,可以缓存,不需要重新下载。所以在上面的例子中,你不希望你的用户再次下载 Moment.js 因为......它根本没有改变。

我建议您阅读这篇关于如何拆分捆绑包的非常好的文章: https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

您还可以通过创建 "per page" 块来添加一级拆分。以下是使用 React 的方法:https://reactjs.org/docs/code-splitting.html 如果您在页面 A 上进行更改,您的用户将不必再次下载页面 B 的块。