导入 Handlebar 模板和获取它们之间的区别？ [关闭]答案

【问题标题】：Difference between importing Handlebar templates and fetching them? [closed]导入 Handlebar 模板和获取它们之间的区别？ [关闭]
【发布时间】：2020-07-19 21:53:21
【问题描述】：

我看到人们使用 fetch 请求来获取 .hbs 文件，这些文件已经在服务器中，并且可以使用 import 语法简单地导入。为什么会这样？从服务器内部获取文件有什么意义吗？直接export const studentTemplate = "*the template*"不是更好吗？并且不允许简单导出已编译函数而不是模板本身吗？导入速度是否较慢（据我所知，它们不应该像获取请求那样处理网络）？

例如而不是做所有这些活动——从服务器内部获取文件，注册所有必要的部分，然后编译要使用的函数——在必须输出 HTML 的文件内部，有一个单独的文件不是更好吗？ - 导入车把模板而不是获取它，注册所需的部分，编译函数并只导出函数 - 然后只导入编译的函数？

【问题讨论】：

标签： javascript import fetch handlebars.js

【解决方案1】：

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

当用户执行需要呈现该模板的操作时按需加载，但这可能会导致一些延迟（需要微调器）
或按照模板被呈现的可能性顺序逐一预加载，但这可能会导致不必要的数据提取（静态导入也会如此）。

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

注意：正如另一个答案所断言的那样，它与防止“阻止 javascript 执行”无关。您也可以将模板直接嵌入到 HTML 中的 template 或 <script type="text/template"> 标记中，并推迟对其内容的解析/编译，但这会增加初始请求的加载时间。

【讨论】：

我没用过webpack，如有错误请指正。据我了解，按需加载意味着每次用户尝试做某事时都会加载它，而 webpack 只会在第一次需要时加载一次。是它还是这里有其他概念？
我特别要求消除所有开销网络和编译延迟。我知道模板会被预编译，但我不了解网络部分。还是因为不像静态导入和获取请求那样不需要建立连接？
编辑（因为我在发布后这么晚才无法编辑评论）：我很确定您的意思是现在可以使用 AMD/webpack 导入多个预编译模板，否则使用获取请求/多个单独动态导入我会建立多个连接。我希望我的理解是正确的。
@asharpharp 您的理解基本正确。 Webpack 不会转换 Handlebars tpls，您需要实现。那个（例如 webpack 插件）。 Dynamic imports 是一个由 webpack 填充的 ES6 特性。对于每个动态导入，webpack 都会创建一个单独的 bundle.js。在引擎盖下，dyn。导入会发出请求并返回一个承诺，因此它们不会减少所需的请求数量。没关系，重要的不是请求数量，而是它们如何随时间传播使用可用带宽。