magento2添加js绑定
《Magento2.X企业级开发实战》
Javascript绑定是一种将不同的文件分组以减少加载页面所需的HTTP请求数量的技术。Bundling在现在的“基于模块”开发中经常使用，其中一些功能基本上被划分为模块。对于加载模块，我们通常使用一些流行的模块加载器，如rollup.js或RequireJS（这是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。
请记住，Luma和Blank主题都有自己的排除列表，如果你没有正确的后退并且没有自己的排除列表，那么捆绑包将是巨大的，因为所有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人员为我们创建额外的功能，绑定将在未来有意义。
我们需要配置文件，我们将能够决定：
- 绑定数量
- 绑定尺寸
- 绑定内容
- 将加载哪些页面特定的包
本文来源于：【Magento中文网】，并添加本文地址链接。
如未按上述操作复制或转载，本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益，可联系我们进行处理。