可能会存在创建此类布局转换

rmamin

当您加载服务器渲染的页面然后开始在客户端中增强它时，的危险，不是吗？

杰里米：绝对地。这就是组件水合变得有点棘手的地方，因为该组件的尺寸可能会因多种原因而改变。就像客户端组件中存在的内容可能不会在服务器上呈现一样，因为在客户端上执行之前不会评估状态。这是一个极其困难的问题。我不会坐在这里假装我已经找到了解决这个问题的灵丹妙药。

德鲁：我想谈谈动态导入和代码分割，这两种技术都是针对在体验 电报号码数据 开始时预先下载和执行大量 JavaScript 问题的不同技术。提出大量小请求是否存在过度优化的风险，特别是在最简单的小型项目上，或者从一开始就预防您将遇到这些问题而实施这种做法绝对没有坏处？或者您应该等到真正看到性能问题后再考虑这些事情吗？

杰里米：所以我建议你刚才所说的尾部是一个很好的引导方式。我们不应该尝试过早地优化，除非这些优化可以非常快速和轻松地实现，但是如果在早期并没有真正存在很多性能问题的情况下花费大量精力进行优化，我认为代码分割可能是不必要发生的事情。您可能可以预先加载该功能。

杰里米：但例如，我在书中谈到了这一点。如果您有一个由大段 JavaScript 驱动的高价值交互，对我来说，大段 JavaScript 可能意味着 20 KB，因为通过网络进行压缩，最终可能会变成 60 KB 的 JavaScript 块。然后，如果您可以将其放在主捆绑包或无数捆绑包中的任何一个上，您的网站可能会发货，您将有助于提高启动性能。

杰里米：但在书中，我讨论了一种关于感知何时……或至少尝试感知用户何时可能进行高价值交互的技术。所以我使用的示例是一段 JavaScript。它用于验证表单的内容，因为 HTML 表单验证很棒，但它也不可设置样式，而且非常简单。对于诸如类型等于电子邮件之类的事情没有太多的灵活性，对吧？它以某种方式评估它。然而，在客户端验证表单确实很有帮助，因为我们还可以设置它的样式。我们可以调整该验证的外观，使其更接近品牌美学或网站美学。所以在这个例子中，我所做的是，我说过，如果用户关注……甚至只是关注表单中的任何字段，那就是我们预加载那段 JavaScript 的点。



杰里米因此希望到时候，因为填写表格需要一点时间，所以我希望网络有足够的时间将其拉下来，以便在调用动态导入时，它可以直接点击现金以获得什么已经被预加载了。这是我一直在做的事情，但在所有情况下都很难做到。例如，您无法在悬停时始终可靠地执行此操作，因为某些设备没有精细的指针。他们有……他们是……这是点击输入，对吧？例如，悬停发生的时间与您拥有精细指针的时间不同。

德鲁：负责任地使用 JavaScript 的一个方面是考虑我们如何消耗用户、可用资源，比如电池寿命或数据限额（如果他们有数据计划）。我们可以依靠哪些技巧来帮助我们思考这些事情？

杰里米：是的。所以目前，或者至少从上一次的历史来看……我不知道这个功能具体是什么时候发布的，但是 Android 版的 Chrome 曾经有一个名为“保存数据”的 Chrome 扩展程序。你会做的是，如果在 Android 版 Chrome 的设置中你会说“减少数据使用量”。我完全忘记了复选框上的标签是什么，但是您检查了它，打开了它，它的作用是将此信号作为请求标头发送。这是一个称为保存数据的请求标头，它只有一个令牌，并且刚刚打开。