优化资源文件

对于响应更迅速的Commerce站点,请优化CSS和JavaScript (JS)资源文件并消除渲染阻止资源。

  • 优化CSS和JS文件 — 通过将Adobe Commerce配置为合并、缩小单独的文件并将其捆绑到单个文件中,减少加载CSS和JavaScript (JS)文件所需的时间。
  • 消除渲染阻止资源 — 考虑内联提供关键JS和CSS功能,并延迟所有非关键JS/CSS样式。 有关指导,请参阅消除渲染阻止资源

受影响的产品和版本

所有受支持的版本,2.3及更高版本,共个:

  • 云基础架构上的Adobe Commerce
  • Adobe Commerce内部部署

合并或缩小CSS文件

通过合并、缩小单独的文件并将其捆绑到单个文件中,可以缩短加载CSS和JavaScript (JS)文件所需的时间。

IMPORTANT
云基础架构上的Adobe Commerce始终以生产模式运行,不能以其他方式设置它,因此您必须使用命令行方法来启用合并、缩小和捆绑功能。

如果您的部署使用HTTP/2,请勿合并或捆绑文件。 HTTP/2以异步方式下载静态文件。 在处理文件内容之前,浏览器必须下载整个合并文件。

使用管理员

要启用CSS合并或缩小,请转到​ 管理员 > 存储 > 设置 > 配置 > 高级 > 开发人员 > CSS设置

使用命令行

要在云基础架构上的Adobe Commerce中启用CSS合并,请执行以下操作:

  1. 在本地运行此命令:

    code language-bash
    bin/magento config:set --lock-config dev/css/merge_css_files 1
    
  2. 提交对app/etc/config.php文件的更改并重新部署。

要在云基础架构上的Adobe Commerce中启用CSS缩小,请执行以下操作:

  1. 在本地运行此命令:

    code language-bash
    bin/magento config:set --lock-config dev/css/minify_files 1
    
  2. 提交对app/etc/config.php文件的更改并重新部署。

缩小JS文件

使用管理员

在​ 管理员 ​侧边栏上,转到​ 商店 > 设置 > 配置 > 高级 > 开发人员 > JavaScript设置

使用命令行

要在云基础架构上的Adobe Commerce中启用JS缩小,请执行以下操作:

  1. 在本地运行此命令:

    code language-bash
    bin/magento config:set --lock-config dev/js/minify_files 1
    
  2. 提交对app/etc/config.php文件的更改并重新部署。

合并和捆绑JS文件

您可以在Commerce管理中打开合并或捆绑功能(合并和捆绑功能无法同时启用):存储 > 设置 > 配置 > 高级 > 开发人员 > JavaScript设置

您还可以从命令行启用Adobe Commerce内置捆绑(基本捆绑):

php -f bin/magento config:set dev/js/enable_js_bundling 1

其他信息

recommendation-more-help
754cbbf3-3a3c-4af3-b6ce-9d34390f3a60