如何解决WordPress插件中的资源加载问题?使用automattic/jetpack-assets可以!

可以通过以下地址学习 composer学习地址

在开发 wordpress 插件时,资源加载问题一直是个挑战,尤其是涉及到脚本、样式和多语言支持的管理。我最近在一个项目中遇到了这样的问题,用户反映插件加载速度慢,影响了体验。经过一番探索,我发现 automattic/jetpack-assets 这个库能够很好地解决这些问题。

automattic/jetpack-assets 是一个专门用于 Jetpack 生态系统包的资产管理工具库。它提供了多种功能来优化资产加载,包括路径操作、异步脚本的排队,以及 DNS 资源提示等。这些功能使得插件开发者可以更高效地管理资源,提升用户体验。

使用这个库非常简单,通过 Composer 就可以安装:

composer require automattic/jetpack-assets

以下是一些常用的方法和用法:

  • ::get_file_url_for_environment( $min_path, $non_min_path, $package_path ):根据 SCRIPT_DEBUG 常量选择 $min_path 和 $non_min_path 之间的路径,类似于 plugins_url()。可以使用 jetpack_get_file_for_environment 过滤器来控制返回的 URL。

  • ::add_resource_hint( $urls, $type ):将域名(字符串或数组)添加到 WordPress 的资源提示中。支持的类型包括 dns-prefetch(默认)、preconnect、prefetch 和 prerender。

  • ::normalize_path( $path ):规范化路径或 URL 中的 . 和 .. 组件。

  • ::register_script( $handle, $path, $relative_to, $options ):使用 @wordpress/dependency-extraction-webpack-plugin 生成的数据注册 Webpack 打包的脚本和样式。这替代了读取 .asset.php 文件并调用 wp_register_script()、wp_register_style()(可能根据 is_rtl() 改变文件名)和 wp_set_script_translations() 的操作。

  • ::enqueue_script( $handle ):排队之前使用 ::register_script() 注册的脚本和样式。

  • ::alias_textdomains_from_file( $file ):使用 automattic/jetpack-composer-plugin 记录的数据,启用共享 Composer 库的翻译。

  • ::alias_textdomains( $from, $to, $totype, $ver ):如果 ::alias_textdomains_from_file() 不够用,手动添加文本域别名。

此外,Assets 包还提供了一个 wp-jp-i18n-loader 脚本,用于支持使用 @automattic/i18n-loader-webpack-plugin 的 Webpack 延迟加载包。无需初始化,只需调用 ::alias_textdomains_from_file() 或 ::alias_textdomains(),如果这些包来自共享的 Composer 库。

在 WordPress 插件中使用这个包时,建议使用 Jetpack Autoloader 作为自动加载器,以确保与其他使用此包的插件最大限度地兼容。

通过使用 automattic/jetpack-assets,我成功地提升了插件的加载速度和资源管理效率。这不仅解决了用户反馈的问题,还为未来的开发提供了更好的基础。如果你在开发 WordPress 插件时遇到了类似的资源加载问题,不妨尝试一下这个库。

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享