[仅限PaaS]{class="badge informative" title="仅适用于云项目(Adobe管理的PaaS基础架构)和内部部署项目上的Adobe Commerce 。"}
优化资源文件
对于响应更迅速的Commerce站点,请优化CSS和JavaScript (JS)资源文件并消除渲染阻止资源。
- 优化CSS和JS文件 — 通过将Adobe Commerce配置为缩小并捆绑文件,减少加载CSS和JavaScript (JS)文件所需的时间。
- 消除渲染阻止资源 — 考虑内联提供关键JS和CSS功能,并延迟所有非关键JS/CSS样式。 有关指导,请参阅消除渲染阻止资源。
受影响的产品和版本
- 云基础架构上的Adobe Commerce
- Adobe Commerce内部部署
合并或缩小CSS文件
通过合并、缩小单独的文件并将其捆绑到单个文件中,可以缩短加载CSS和JavaScript (JS)文件所需的时间。
如果您的部署使用HTTP/2,请勿合并或捆绑文件。 HTTP/2以异步方式下载静态文件。 在处理文件内容之前,浏览器必须下载整个合并文件。
使用管理员
要启用CSS合并或缩小,请转到Admin > Stores > Settings > Configuration > Advanced > Developer > CSS Settings。
使用命令行
要在云基础架构上的Adobe Commerce中启用CSS合并,请执行以下操作:
-
在本地运行此命令:
code language-bash bin/magento config:set --lock-config dev/css/merge_css_files 1 -
提交对
app/etc/config.php文件的更改并重新部署。
要在云基础架构上的Adobe Commerce中启用CSS缩小,请执行以下操作:
-
在本地运行此命令:
code language-bash bin/magento config:set --lock-config dev/css/minify_files 1 -
提交对
app/etc/config.php文件的更改并重新部署。
缩小JS文件
使用Admin
在Admin侧边栏上,转到Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings。
使用命令行
要在云基础架构上的Adobe Commerce中启用JS缩小,请执行以下操作:
-
在本地运行此命令:
code language-bash bin/magento config:set --lock-config dev/js/minify_files 1 -
提交对
app/etc/config.php文件的更改并重新部署。
捆绑JS文件
您可以在Commerce Admin中启用捆绑: Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings。
您还可以从命令行启用Adobe Commerce内置捆绑(基本捆绑):
php -f bin/magento config:set dev/js/enable_js_bundling 1
合并JS文件(不推荐) merge-js-files
其他信息
- 客户端优化设置
- 捆绑提示(位于 配置最佳实践 中) — 第三方捆绑工具、HTTP/2以及有关已弃用的JS和CSS合并的指南
- 用户指南:优化资源文件
- 前端开发人员指南:CSS合并、缩小和网站性能
- 高级JavaScript捆绑