搜索pure_mashiro / magento2-bundlejs
高级JavaScript打包
Requires
- magento/framework: ~102|~103
- rosell-dk/dom-util-for-webp: *
Requires (Dev)
- magento/magento-coding-standard: *
- phpmd/phpmd: ^2.13
- phpstan/extension-installer: ^1.2
- phpstan/phpstan: ^1.6.8
- phpunit/phpunit: ^9.0
This package is auto-updated.
Last update: 2024-10-01 00:20:41 UTC
README
- 延迟缓存页面上非重要组件的渲染
- 在非缓存页面上使用包。
安装
composer require pure_mashiro/magento2-bundlejs
使用Luma主题的PageSpeed分数
外部链接
我的观点
Magento 2使用require JS在有需要时加载JS。然而，当页面刚开始时，它已经需要加载近200个JS（或更多）文件。在HTTP/1中，这是一个致命的弱点，因为文件需要逐个下载，这大大增加了加载时间。但是，启用HTTP/2后，Magento 2前端的这个弱点得到了掩盖，不再是问题。因此，现在，Magento 2 luma主题的核心网络关键性能相当不错。除了产品详情页，它的CLS较差。有一个git问题，我希望将来能合并到develop分支：magento/magento2#33265。开发者也可以随时迁移修复方案。
定制的Magento 2网站与Luma默认相比，通常具有较低的Google速度分数。当我们开始使用第三方JS并自定义而不考虑CLS时，分数开始变低（滑块和其他不良JS代码通常会降低CLS）。页面倾向于首先加载JS，即使图像标签在JS之前，这也导致了使用第三方JS时LCP关键性能会降低。
Hyva主题也会有同样的问题。如果页面使用第三方JS，Hyva主题的页面速度分数将降低。在移动端，分数可以从9x降低到70或50，甚至30，具体取决于第三方JS的数量。请别误会，我并不是说70或50是一个坏结果，这是一个好结果，但它不会保持9x分数。他们提到“开箱即用的Hyvä在Google PageSpeed中得分为100/100，并且在所有核心网络关键性能指标上都通过”。然而，默认的Luma主题在Google PageSpeed中也可以有一个相当不错的分数8x-9x/9x（除了由于CLS问题而导致的产品详情页）。
高级包JS（不是原生的Magento包）通常是HTTP/1的解决方案。然而，随着HTTP/2的出现，我发现它不再必要。在Luma默认情况下，使用高级包JS，分数甚至比不使用包时还要低。问题与第三方JS类似。页面倾向于首先加载JS，但由于JS现在是打包的，文件大小变大，LCP降低。
这就是为什么在我的扩展中，建议仅在非缓存页面上使用包。为了进一步提高加载时间，该扩展具有一个功能，可以延迟JS执行，其中非重要组件只有在用户开始与页面交互时才会渲染。