Javascript绑定是一种将不同的文件分组以减少加载页面所需的HTTP请求数量的技术。Bundling在现在的“基于模块”开发中经常使用,其中一些功能基本上被划分为模块。对于加载模块,我们通常使用一些流行的模块加载器,如rollup.jsRequireJS(这是Magento的首选)。

HTTP2在这里,所以这种技术将来可能会被弃用。你仍然可以使用捆绑来减少对特定页面的请求数量,但我认为它不值得。

在我们开始“反向”优化之前,我们可以使用捆绑来帮助我们组织资源并向客户端提供更少的文件,这将使网站速度更快

 

Magento 2绑定

首先,让我们看看在Magento 2中加载资源的两种正确方式。

在这个例子中,您可以看到资源是如何加载到两个不同的Magento页面上的——主页和产品页面。

正如您在上面的示例中所看到的,requireJS通过不同的页面加载了不同的资源,而所有的bundle都被加载,无论是否需要它们。
使用RequireJS,我们可以在特定页面上加载特定的JS模块,这意味着您只需要加载必需的资源,减少请求数量。

虽然RequireJS帮助我们减少了页面的请求数量,但我们仍然加载了少量的JS文件,Magento 2中的“少量”意味着40-50。我们需要从50个文件中创建5个文件。文件是异步加载的,但是如果我们能够将这些文件合并到几个文件中,我们可以进一步提高性能。

绑定是一种解决问题的方式,因为它用于将模块和it依赖项合并到单个文件中。
绑定拒绝使用RequireJS之类的模块加载器的主要好处,因为资源不是异步加载的。bundle包含在<script>标记中,位于页面的<head>部分内。

使用捆绑,我们可以决定在哪里加载特定的捆绑,这是最好的部分!例如,我们希望将所有与签出相关的内容放到一个包中,并且只在签出页面上加载它!

心情舒畅?

好吧,Magento人员没有实现RequireJS优化器,这是在不同页面上订购和组织模块负载所必需的。您可以从捆绑包中排除某些脚本,但不能决定特定页面的捆绑包内容。

那么,为什么要用呢?

使用“合并”,您只能合并未通过RequireJS加载的Javascript文件。如果您希望“合并”JS模块,则必须使用捆绑。

你现在脑子里可能有这么多问题。我也是。我仍在寻找答案。

这是一个随机的Zen图像,只是让你冷静下来。

捆绑错过了关键功能(imho),但你仍然可以改变一些事情来组织你的捆绑。

绑定包大小和排除列表

供应商/主题的 Vendor/Theme/etc/view.xml可以改变束的大小和从束中排除某些脚本。

bundle的默认大小为1MB。
捆绑包大小决定了要创建的捆绑包的数量。例如,如果您有4MB的脚本文件且捆绑包大小设置为1MB,则将创建4个捆绑包。

如果数字太低,你可能会有10个或更多的小束在渲染过程中会相互阻塞,所以要小心。
请记住,捆绑包不是异步加载的。

我们还可以从bundle中排除某些脚本。他们将在需要时加载RequireJS。
请记住,LumaBlank主题都有自己的排除列表,如果你没有正确的后退并且没有自己的排除列表,那么捆绑包将是巨大的,因为所有JS模块都将被捆绑,无论你是否需要它们。

<exclude>句柄负责处理应从bundle中排除的文件。就Magento 2而言 - 由于我们无法决定每个页面的捆绑内容,至少我们可以排除整个站点不需要的资产,因此捆绑包只包含所有地方都需要的文件。正如您在上面的示例中所看到的(Luma主题排除列表),jQuery资产可能在任何地方都是必需的,所以我不理解从bundle中排除这些资源的想法。可能Magento的人想要将最重要的东西留在RequireJS控制之下。

激活捆绑

在我们配置了捆绑包大小和排除列表之后,现在是我们打开捆绑并享受性能影响的时候了。

我们可以在这里打开捆绑:  商店>配置>高级>开发人员

捆绑打开后,清除缓存并切换到生产模式(捆绑将无法在“开发人员”模式下工作)。将部署静态文件,您将看到正在前端加载的捆绑包。

性能怎么样?

为了减少通过网站的请求数量,我们做了很多工作。但是,性能存在一个小问题。

这是Luma主题的主页
测试在Magento 2.2.0“dev”版本上进行,在开发控制台(Chrome)中进行以下设置:

在打开捆绑之前:

  • JS请求数:137
  • 大小:2.0MB
  • 加载时间:9.46秒

打开捆绑:

  • JS请求数:8
  • 尺寸:4.2MB
  • 加载时间:20.12秒

看一下尺寸和加载时间?
我们确实减少了正在加载的JavaScript文件的数量,但生成的包的总文件大小大于前端上所有非绑定JavaScript文件的总文件大小。
原因?使用RequireJS,您只需在特定页面上加载所需的JS文件。Bundling合并所有JS资产并在所有页面上提供服务。

结论

我必须说我对绑定感到失望,特别是因为默认情况下我们没有RequireJS优化器。没有它,错过了绑定背后的整体想法。

优点:

  • 将多个文件捆绑到单个文件中

缺点:

  • 否定使用模块加载器的好处
  • bundle的文件大小总计大于所有非捆绑的javascript文件大小(每页)
  • 您无法准确定义捆绑内容
  • 你无法决定哪个页面将被加载哪个包

我认为没有任何理由我们现在应该使用绑定。
如果Magento人员为我们创建额外的功能,绑定将在未来有意义。
我们需要配置文件,我们将能够决定:

  • 绑定数量
  • 绑定尺寸
  • 绑定内容
  • 将加载哪些页面特定的包