Javascript 导入车把模板和获取它们之间的区别？

我见过有人使用fetch请求来获取服务器中已经存在的.hbs文件，这些文件可以使用import语法简单地导入。为什么会这样？从服务器内部获取文件有意义吗？简单地导出constudenttemplate=“*模板*”，不是更好吗？这难道不允许简单导出编译后的函数而不是模板本身吗？导入速度是否较慢（据我所知，它们不应该是因为获取请求处理网络）

---

例如，与其执行所有这些活动—从服务器内部获取文件，注册所有必要的部分，然后编译要使用的函数—在必须输出HTML的文件内部，不如有一个单独的文件—导入Handlebar模板而不是获取模板，注册所需的部分，编译函数并仅导出函数，然后只导入已编译的函数？

这样做的唯一原因是减少初始页面加载时间（通过减小HTML/JS请求的大小）。然后，模板可以是：

• 当用户执行需要呈现该模板的操作时按需加载，但这可能会导致一些延迟（需要微调器）
• 或者逐个预加载，以便呈现模板，但这可能会导致不必要的数据获取（静态导入也会如此）

最好的解决方案是将模板作为构建过程的一部分进行预编译，并将其作为动态导入（更高版本的webpack支持）或使用AMD样式包含在JS包中。此解决方案消除了所有开销、网络和编译延迟、不必要的数据获取，并且最易于维护

---

注意：正如另一个答案所断言的，它与防止“阻塞javascript执行”无关。您也可以将模板直接嵌入HTML中的

template

或

标记中，并延迟对其内容的解析/编译，但这会增加初始请求的加载时间。

我没有使用webpack，如果我错了，请纠正我。据我所知，按需加载意味着每次用户尝试执行某项操作时都会加载，而webpack仅在第一次需要时加载一次。这是真的还是其他的概念？我特别要求消除所有网络开销和编译延迟。我知道模板将被预编译，但我不理解网络部分。或者是因为与静态导入和获取请求不同，不需要建立任何连接？编辑（因为我不能在发布评论后这么晚才编辑评论）：我很确定您的意思是，现在可以使用AMD/webpack导入多个预编译模板，否则使用fetch请求/多个单独的动态导入，我将建立多个连接。我希望我的理解是正确的。@asharpharp你的理解基本上是正确的。Webpack不会转换车把TPL，您需要执行以下操作：。这（如网页包插件）。是由webpack填充的ES6功能。对于每个动态导入，webpack都会创建一个单独的bundle.js。戴恩，在引擎盖下面。导入发出请求并返回承诺，因此不会减少所需的请求量。没关系，重要的不是请求的数量，而是它们如何使用可用带宽随时间分布。