node.js - 在 Meteor 中延迟加载有什么用？

Question

我有以下应用程序结构:

client/
---- main.js
imports/
---- startup/
-------- client/
------------ routes.js
---- ui/
-------- login/
------------ login.html
------------ login.js
-------- register/
------------ register.html
------------ register.js

文件内容如下:

client/main.js

import "/imports/startup/client/routes.js";

imports/startup/client/routes.js

import "../../ui/login/login.js";
import "../../ui/register/register.js";
// other routing code

imports/ui/login/login.js

import "./login.html";
// other login code

imports/ui/register/register.js

import "./register.html";
// other register code

当我运行我的 meteor 应用程序并检查加载到 Chrome DevTools 源代码中的 JS 文件 app.js 时，我发现登录和注册模板都已加载。我明白为什么会这样。

我不明白的是在这种情况下延迟加载的意义。我所有的模板和 HTML 都以与预先加载相同的方式加载。

我的应用程序结构有问题吗？我遵循 meteor 指南中建议的应用程序结构:https://guide.meteor.com/structure.html#example-app-structure

或者我没有正确理解延迟加载？

Answer 1

我知道这是一个老问题，但这是“meteor lazy load”的第三大搜索结果，因此我想将此讨论更新为最新。

原始问题在“延迟加载”和“延迟评估”之间有点混淆。写问题的时候，Meteor 刚刚实现了“惰性求值”，而不是惰性加载。目前 Meteor 支持 eager evaluation、lazy evaluation 和 true lazy loading(按需下载资源)。​​

有关完整讨论，请参阅 Application Structure 部分在 meteor 指南中。

热切评价

Meteor 的目标之一一直是非常易于使用和快速上手，因此从一开始它就支持源文件的“急切评估”:它将自动评估所有 javascript/html/css/coffeescript/它可以找到的 jade/react/etc 文件。 (现在有特殊情况，例如 imports 目录，见下文。)这让初学者可以快速启动和运行应用程序，而无需担心加载顺序或在移动或重命名文件等时更新引用。

惰性求值

从 Meteor v1.3(2016 年 3 月)开始，您还可以使用标准 ES2015 和 CommonJS 语法“导入”和“导出”明确控制何时评估文件。这就是常规 Node 应用程序的工作方式，并且有利于维护更大的代码库。

为了仍然支持急切求值，Meteor 通常只会惰性求值在“imports”目录中找到的文件。从 Meteor v1.7 开始，您还可以通过为客户端和服务器指定显式入口点来选择对整个应用进行完全惰性评估。查看Meteor 1.7 announcement post有关更多信息，请参阅“自定义入口点模块”。

延迟加载

从 Meteor v1.5(2017 年 5 月)开始，Meteor 现在可以真正延迟加载客户端 Assets 。这使您不仅可以控制何时评估文件，还可以控制何时通过线路将文件内容发送到客户端。

您可以在此处的博客文章中阅读更多相关信息: https://blog.meteor.com/announcing-meteor-1-5-b82be66571bb

基本要点是您使用 import() 而不是常规的 import ... 按需下载和加载 javascript 文件。这使您可以控制何时将 Assets 发送到客户端，并且非常适合加速您的主要用例，而无需下载管理页面等额外内容。

对于那些想知道如何使用 Blaze 模板执行此操作的人，请让您的 myTemplate.js 文件执行常规 import './myTemplate.html' 和/或 import './myTemplate. CSS'.然后使用新的 await import('/imports/client/myTemplate') 语法在需要时将其全部拉下来。然后将提取 Blaze 模板并照常使用。

好处:现代浏览器的有效负载更小

从 Meteor v1.7(2018 年 5 月)开始，Meteor 现在将自动为现代“常青”浏览器(自动更新的浏览器)提供优化的 bundle 。这意味着通常包含在诸如 babel 等项目中以让您的现代代码语法在旧浏览器上运行的所有额外的 polyfills 和变通方法甚至不会包含在客户端负载中!

非常令人兴奋的东西，请在此处阅读更多信息:

https://blog.meteor.com/meteor-1-7-and-the-evergreen-dream-a8c1270b0901