简体繁体 English

何时进行代码拆分（React- Suspense 和 Lazy）

[英]When to code split (React- Suspense and Lazy)

原文 2020-05-15 20:09:16 6 1 javascript/ reactjs/ optimization/ code-splitting

What bundle size in KB should I consider splitting at?我应该考虑以多少 KB 为单位进行拆分？ At what point does weight become too heavy that I should split it out.在什么时候重量变得太重以至于我应该把它分开。 My whole bundle without splitting is around 800KB so it loads relatively fast.我没有拆分的整个包大约有 800KB，所以加载速度相对较快。 I am just trying to figure out if it should be around 10KB/ 100KB, etc... Moment.js takes around 50KB, so I am trying to figure out if I should split out all modules that contain moment for example.我只是想弄清楚它是否应该在 10KB/100KB 左右，等等……Moment.js 大约需要 50KB，所以我想弄清楚是否应该拆分包含 moment 的所有模块。

If I don't code split does that mean overall it provides a better user experience once they load the initial page since every other page would load faster?如果我不进行代码拆分，这是否意味着总体上它会在用户加载初始页面后提供更好的用户体验，因为其他所有页面的加载速度都会更快？ I get this would lead to a bad first experience of loading the page, but am just trying to figure out the tradeoffs.我知道这会导致加载页面的初次体验不佳，但我只是想权衡取舍。

Haven't found any good resources with this information.使用此信息尚未找到任何好的资源。 I am using create react app.我正在使用创建反应应用程序。

1 个解决方案

800kb is not super big but still, the smaller your bundle is, the better. 800kb 不是特别大，但您的包越小越好。

I think the main problem having only one bundle is that, if you change one single character in your app, all your clients will need to download everything again.我认为只有一个包的主要问题是，如果您更改应用程序中的一个字符，您的所有客户都需要重新下载所有内容。

Let's take an example:让我们举个例子：

You see a typo in your code.您在代码中看到一个拼写错误。 You already have thousands of users who downloaded the 800kb bundle with this typo.您已经有成千上万的用户下载了带有此拼写错误的 800kb 包。
You push a fix (only one character change).您推动修复（仅更改一个字符）。
All your users need to download the whole bundle again (yes, they need to download Moment.js again).您的所有用户都需要再次下载整个包（是的，他们需要再次下载 Moment.js）。 Be it 1*800kb or 8*100kb, they will still need to download 800kb of data.无论是 1*800kb 还是 8*100kb，他们仍然需要下载 800kb 的数据。 ( related question ) （相关问题）

What you want to do, is to split your chunks in a way that allows users to only download the files that changed.您想要做的是以一种允许用户仅下载更改的文件的方式拆分您的块。 For the other files, they can be cached, so no need to download them again.对于其他文件，可以缓存，不需要重新下载。 So in the example above, you don't want your users to download Moment.js again because... it didn't change at all.所以在上面的例子中，你不希望你的用户再次下载 Moment.js 因为......它根本没有改变。

I suggest you to read this very nice article about how to split your bundle: https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758我建议您阅读这篇关于如何拆分捆绑包的非常好的文章： https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

You can also add one level of split by creating "per page" chunks.您还可以通过创建“每页”块来添加一级拆分。 Here is how to do it with React: https://reactjs.org/docs/code-splitting.html If you make changes on Page A, your users won't have to download the chunks for Page B again.以下是使用 React 执行此操作的方法： https://reactjs.org/docs/code-splitting.html如果您在页面 A 上进行更改，您的用户将不必再次下载页面 B 的块。