流星中的延迟加载有什么用?

cha*_*ryp 4 lazy-loading node.js meteor meteor-blaze flow-router

我具有以下应用程序结构:

client/
---- main.js
imports/
---- startup/
-------- client/
------------ routes.js
---- ui/
-------- login/
------------ login.html
------------ login.js
-------- register/
------------ register.html
------------ register.js
Run Code Online (Sandbox Code Playgroud)

以下是文件的内容:

客户端/ main.js

import "/imports/startup/client/routes.js";
Run Code Online (Sandbox Code Playgroud)

导入/启动/客户端/routes.js

import "../../ui/login/login.js";
import "../../ui/register/register.js";
// other routing code
Run Code Online (Sandbox Code Playgroud)

导入/ui/login/login.js

import "./login.html";
// other login code
Run Code Online (Sandbox Code Playgroud)

导入/ui/register/register.js

import "./register.html";
// other register code
Run Code Online (Sandbox Code Playgroud)

当我运行流星应用程序并检出app.js加载到Chrome DevTools中的源代码中的JS文件时,我发现登录和注册模板均已加载。我知道为什么会这样。

我不理解的是这种情况下的延迟加载。我所有的模板和HTML的加载方式与渴望加载的方式相同。

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

也许我不正确理解延迟加载?

ala*_*ing 7

我知道这是一个老问题,但这是“流星惰性负载”的第三高搜索结果,因此我想将此讨论更新为最新内容。

最初的问题在“延迟加载”和“延迟评估”之间有些混淆。撰写问题时,Meteor刚刚实施了“惰性评估”而不是延迟加载。目前,Meteor支持急切评估,延迟评估和真正的延迟加载(按需下载资产)。

有关完整讨论,请参见《流星指南》中有关应用程序结构的部分。

渴望评估

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

懒惰评估

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

为了仍然支持急切评估,Meteor通常只会懒惰地评估在“ imports”目录中找到的文件。从Meteor v1.7开始,您还可以通过为客户端和服务器指定显式入口点来选择对整个应用程序进行完全延迟评估。有关更多信息,请参见“自定义入口点模块”下的Meteor 1.7公告

延迟加载

从Meteor v1.5(2017年5月)开始,Meteor现在可以真正,轻松地加载客户端资产。这样,您不仅可以控制何时评估文件,还可以控制何时将文件内容通过电线发送到客户端。

您可以在以下博客文章中了解更多有关它的信息:https : //blog.meteor.com/announcing-meteor-1-5-b82be66571bb

基本要点是您可以使用import()而不是常规import ...的方式按需下载和加载javascript文件。这使您可以控制何时将资产发送到客户端,非常适合加快主要用例的速度,而不必下载其他内容,例如管理页面。

对于那些想知道如何使用Blaze模板进行操作的人,请让myTemplate.js文件定期import './myTemplate.html' and/or导入“ ./myTemplate.css”。然后await import('/imports/client/myTemplate')在需要时使用新语法将其全部拉低。然后,Blaze模板将被拉出,并且可以正常使用。

优点:现代浏览器的有效载荷更小

从Meteor v1.7(2018年5月)开始,Meteor现在将自动为现代“常绿”浏览器(自行更新的浏览器)提供优化的软件包。这意味着通常包含在项目中的所有额外的polyfill和解决方法,例如babel为了使您的现代代码语法在较旧的浏览器上运行,甚至都不会包含在客户端有效载荷中!

非常令人兴奋的东西,在这里阅读更多有关它的信息:

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