解决WP Rocket延迟加载JS导致页面错乱的问题：特定URL排除JS脚本

本文将指导你如何在使用WP Rocket的“延迟JavaScript执行”功能时，针对特定页面排除某些JS脚本，以避免页面错乱。这通常发生在某些JS脚本必须立即加载才能保证页面正常渲染的情况下，例如轮播图或依赖特定JS库的功能。我们将以修改WP Rocket提供的helper插件为例，详细讲解如何配置，并提供一些排查问题的思路。

修改Helper插件以排除特定URL的JS脚本延迟加载

WP Rocket提供了一个名为“WP Rocket | Exclude JS scripts from Delay JS only at some URLs”的helper插件，允许用户在特定URL下排除指定的JS脚本。然而，有时按照插件说明配置后，仍然无法生效。以下是详细的配置步骤和可能的解决方案：

1. 理解插件原理：

   该插件通过rocket_delay_js_exclusions过滤器，修改WP Rocket的JS延迟加载排除列表。它首先判断当前页面是否在指定的URL列表中，如果是，则将指定的JS脚本添加到排除列表中，使其不被延迟加载。

2. 配置wp-rocket-exclude-delay-js-per-url.php文件：

   打开wp-rocket-exclude-delay-js-per-url.php文件，找到以下代码段：

   $excluded_slugs = array(
       'tablets',
       //'another-slug',
       //'another-one',
   );

   将需要排除延迟加载的页面slug添加到$excluded_slugs数组中。Slug通常是URL中页面名称的部分。例如，如果你的平板电脑页面URL是example.com/tablets/，那么slug就是tablets。

   接下来，找到以下代码段：

   if (
   
       ( function_exists( 'is_page' ) && is_page( $excluded_slugs ) )
       || ( function_exists( 'is_single' ) && is_single( $excluded_slugs ) )
       || (is_front_page())
       // || (is_page_template('home-v4.php'))
       // || (is_page_template('tablet.php'))
   
      /*
      IF YOU NEEED TO EXCLUDE BASED ON DIFFERENT RULES
       you can replace lines 41 and 42 with different conditionals, or add more conditions, for example:
       || ( is_front_page() )
       || ( is_category() )
       ... etc
       */
   
   ) {

   这段代码定义了在哪些页面上应用排除规则。is_page()函数用于判断当前页面是否为指定的页面。is_front_page()函数用于判断当前页面是否为首页。你可以根据需要添加更多的条件，例如is_category()用于判断当前页面是否为分类页面。

   最后，找到以下代码段：

   $exclusions[] = 'jquery.min.js';
   $exclusions[] = 'slick.min.js';
   //$exclusions[] = 'script2.js';
   //$exclusions[] = 'anotherInline';

   将需要排除延迟加载的JS脚本文件名添加到$exclusions数组中。确保文件名与实际的文件名完全一致。

   

   WPS AI

   金山办公发布的AI办公应用，提供智能文档写作、阅读理解和问答、智能人机交互的能力。

   下载

3. 检查条件判断：

   确保is_page()函数能够正确识别你的页面。如果你的页面使用了自定义页面模板，可以尝试使用is_page_template()函数，例如：

   || (is_page_template('home-v4.php'))
   || (is_page_template('tablet.php'))

   注意替换home-v4.php和tablet.php为你的实际模板文件名。

4. 插件加载优先级：

   如果你的代码是通过代码片段插件添加的，需要设置较高的优先级，确保在WP Rocket加载之前执行。将以下代码添加到你的代码片段中：

   add_filter( 'rocket_delay_js_exclusions',  __NAMESPACE__ . '\exclude_from_delay', 999 );

   999是一个较高的优先级，可以确保该过滤器在其他过滤器之前执行。

5. 联系官方支持：

   如果以上步骤都无法解决问题，建议联系WP Rocket官方支持，寻求专业帮助。他们可能能够诊断出更深层次的问题。

注意事项和总结

• 确保文件名正确：JS脚本文件名必须与实际文件名完全一致，包括大小写。
• 清除缓存：修改插件后，务必清除WP Rocket缓存和浏览器缓存，以确保新的配置生效。
• 测试：在修改插件后，务必在不同设备和浏览器上进行测试，确保页面功能正常。
• 代码片段插件优先级：如果使用代码片段插件，请设置较高的优先级。

通过以上步骤，你应该能够解决WP Rocket延迟加载JS导致特定页面错乱的问题。如果问题仍然存在，请仔细检查配置，并考虑联系WP Rocket官方支持。记住，仔细的配置和充分的测试是解决问题的关键。