如何判断Svelte组件是否完全是静态内容？

Question

我正在使用一个静态网站生成器，希望同时支持反应性JavaScript交互和标准的“将页面加载到浏览器中”超链接。在我看来，像斯维尔特这样的东西可能更适合这个；我可以使用服务器端渲染支持为所有页面生成HTML，然后可以编译和附带JavaScript组件hydratable: true以支持动态功能。

我想到的这种方法的一个问题是，我项目的大多数组件都是完全静态的内容：只有HTML和超链接，没有任何状态或事件处理程序，除非为新生成HTML文件，否则我不会更改道具。不同的页面。如果我天真地生成JavaScript以在页面加载时合并所有这些组件，那么我最终可能会得到比实际需要的包更大的包（以及在运行时完成的更多工作）。

Svelte是否提供任何方法来优化这种情况？我可以以某种方式检查某个组件是否纯粹是其道具的功能，以便在不需要时避免为其补水吗？还是编译器足够聪明才能为我做到这一点？

Answer 1

这是一个很好的问题，我们目前没有一个简单的答案。

它是能够确定个体组件是否具有可以改变值- svelte.compile(...)与返回一个对象vars属性，它是在组件内部的所有值的数组。检查此数组将告诉您哪些值永远不会重新分配或更改。（它不会告诉您组件是否具有具有副作用但不影响状态的事件处理程序，这对于确定组件是否完全静态也是必要的。这是我们将来可以添加的信息3 .x版本。）

但这只是故事的一半。考虑一个声明name属性的组件...

<script>
  export let name;
</script>

<h1>Hello {name}!</h1>

...并且在您的应用中使用的方式如下：

<Greeting name="world"/>

就编译器在编译<Greeting>组件时所关心的而言，该name值随时可能更改，因此将其视为完全静态是不安全的。但是，如果它可以更全面地了解您的应用，则可以将其替换{name}为world，这会带来很多好处。

在补水时，Svelte假定现有DOM与应该存在的内容之间可能存在差异。在许多情况下，可以安全地假设其他情况，并跳过检查已知为静态的子树的工作，这样就无需在生成的JS中包括它们。

作为编译器，Svelte位置优越，可以利用这些技术，但是我们尚未进行这项工作。理想情况下，我们将能够以无需更改任何内容的方式缩小应用程序的方式来升级编译器。如果您热衷于尝试同时进行各种尝试，那么vars从那里返回的属性svelte.compile(...)（以及ast我想是的属性）就是开始的地方。