核心函数：`wp_maybe_load_block_editor_scripts_and_styles`的区块编辑器资源加载逻辑与优化？

区块编辑器资源加载逻辑与优化：wp_maybe_load_block_editor_scripts_and_styles深度剖析

大家好，今天我们深入探讨WordPress区块编辑器资源加载的核心函数：wp_maybe_load_block_editor_scripts_and_styles。这个函数控制着区块编辑器所需的JavaScript脚本和CSS样式何时以及如何加载，理解它对于优化网站性能至关重要。我们不仅会分析其代码逻辑，还会探讨优化策略，以确保编辑器只在需要时才加载资源，从而提升网站整体速度。

1. wp_maybe_load_block_editor_scripts_and_styles函数概述

wp_maybe_load_block_editor_scripts_and_styles函数位于wp-includes/script-loader.php文件中。它的主要职责是判断当前页面是否需要加载区块编辑器资源，如果需要，则注册并加载相关的脚本和样式。这个函数通常在admin_enqueue_scripts action hook中被调用，确保在管理界面加载脚本和样式时执行。

2. 函数源码分析

下面是 wp_maybe_load_block_editor_scripts_and_styles 函数的核心代码（WordPress最新版本）：

function wp_maybe_load_block_editor_scripts_and_styles() {
    global $pagenow;

    // Only load Gutenberg-related scripts and styles on pages that use it.
    if ( ! is_admin() ) {
        return;
    }

    // Don't load on widgets or customize page.
    if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) {
        return;
    }

    // Don't load on plugin installation pages.
    if ( 'plugin-install.php' === $pagenow ) {
        return;
    }

    // Don't load on theme installation pages.
    if ( 'theme-install.php' === $pagenow ) {
        return;
    }

    // Don't load on nav menus page.
    if ( 'nav-menus.php' === $pagenow ) {
        return;
    }

    // Don't load on user profile page.
    if ( 'profile.php' === $pagenow ) {
        return;
    }

    // Don't load on user edit page.
    if ( 'user-edit.php' === $pagenow ) {
        return;
    }

    // Don't load on update core page.
    if ( 'update-core.php' === $pagenow ) {
        return;
    }

    // Don't load on privacy policy page.
    if ( 'privacy.php' === $pagenow ) {
        return;
    }

    // Don't load on site health page.
    if ( 'site-health.php' === $pagenow ) {
        return;
    }

    // Don't load on plugin editor page.
    if ( 'plugin-editor.php' === $pagenow ) {
        return;
    }

    // Don't load on theme editor page.
    if ( 'theme-editor.php' === $pagenow ) {
        return;
    }

    if ( function_exists( 'get_current_screen' ) ) {
        $current_screen = get_current_screen();
        if ( $current_screen ) {
            if ( in_array( $current_screen->base, array( 'post', 'edit' ), true ) ) {
                if ( $current_screen->post_type ) {
                    $post_type_object = get_post_type_object( $current_screen->post_type );
                    if ( $post_type_object && $post_type_object->show_in_rest ) {
                        wp_enqueue_script( 'wp-blocks' );
                        wp_enqueue_script( 'wp-block-directory' );
                        wp_enqueue_script( 'wp-i18n' );
                        wp_enqueue_script( 'wp-element' );
                        wp_enqueue_script( 'wp-components' );
                        wp_enqueue_script( 'wp-polyfill' );
                        wp_enqueue_script( 'wp-editor' );
                        wp_enqueue_script( 'wp-data' );
                        wp_enqueue_script( 'wp-plugins' );
                        wp_enqueue_script( 'wp-edit-post' );
                        wp_enqueue_script( 'wp-format-library' );
                        wp_enqueue_script( 'wp-dom-ready' );
                        wp_enqueue_script( 'wp-shortcode' );
                        wp_enqueue_script( 'wp-viewport' );
                        wp_enqueue_style( 'wp-edit-blocks' );
                        wp_enqueue_style( 'wp-components' );
                        wp_enqueue_style( 'wp-block-library' );

                        // Include global styles (e.g. `.editor-styles-wrapper`).
                        wp_enqueue_style( 'global-styles' );

                        /**
                         * Fires after block editor assets have been enqueued but before the editor is initialized.
                         *
                         * @since 5.0.0
                         */
                        do_action( 'enqueue_block_editor_assets' );
                    }
                }
            } elseif ( 'site-editor' === $current_screen->id ) {
                wp_enqueue_script( 'wp-blocks' );
                wp_enqueue_script( 'wp-block-directory' );
                wp_enqueue_script( 'wp-i18n' );
                wp_enqueue_script( 'wp-element' );
                wp_enqueue_script( 'wp-components' );
                wp_enqueue_script( 'wp-polyfill' );
                wp_enqueue_script( 'wp-editor' );
                wp_enqueue_script( 'wp-data' );
                wp_enqueue_script( 'wp-plugins' );
                wp_enqueue_script( 'wp-edit-site' );
                wp_enqueue_script( 'wp-format-library' );
                wp_enqueue_script( 'wp-dom-ready' );
                wp_enqueue_script( 'wp-shortcode' );
                wp_enqueue_script( 'wp-viewport' );
                wp_enqueue_style( 'wp-edit-blocks' );
                wp_enqueue_style( 'wp-components' );
                wp_enqueue_style( 'wp-block-library' );

                // Include global styles (e.g. `.editor-styles-wrapper`).
                wp_enqueue_style( 'global-styles' );

                /**
                 * Fires after block editor assets have been enqueued but before the editor is initialized for the site editor.
                 *
                 * @since 5.8.0
                 */
                do_action( 'enqueue_block_editor_assets' );

            }
        }
    }
}

3. 代码逻辑分解

函数首先通过一系列的 if 语句检查当前页面是否是特定的管理页面，例如widgets，customize，plugin-install等。如果页面匹配这些条件，函数会立即返回，避免加载不必要的资源。

页面类型	$pagenow 的值	是否加载区块编辑器资源
前端页面	N/A (函数会直接返回)	否
Widgets页面	widgets.php	否
Customize页面	customize.php	否
Plugin安装页面	plugin-install.php	否
Theme安装页面	theme-install.php	否
导航菜单页面	nav-menus.php	否
用户资料页面	profile.php	否
用户编辑页面	user-edit.php	否
WordPress 更新页面	update-core.php	否
隐私政策页面	privacy.php	否
站点健康页面	site-health.php	否
插件编辑器页面	plugin-editor.php	否
主题编辑器页面	theme-editor.php	否
文章/页面编辑页面	post.php 或 edit.php (且满足其他条件)	是
站点编辑器页面	site-editor (通过 $current_screen->id 判断)	是

如果页面通过了上述所有检查，函数会尝试获取当前屏幕（current_screen）。如果成功获取，它会检查当前屏幕是否是文章或页面编辑页面 ($current_screen->base 为 post 或 edit)。更重要的是，它会检查该文章类型是否启用了REST API ($post_type_object->show_in_rest)。只有当文章类型启用了REST API时，才会加载区块编辑器的脚本和样式。

最后，如果条件满足，函数会使用 wp_enqueue_script 和 wp_enqueue_style 函数注册并加载一系列的JavaScript脚本和CSS样式，这些资源是区块编辑器正常运行所必需的。do_action( 'enqueue_block_editor_assets' ) 允许开发者通过钩子函数添加额外的资源。

4. 优化策略

从上面的分析可以看出，wp_maybe_load_block_editor_scripts_and_styles 函数已经做了一些基本的优化，避免在不需要区块编辑器的页面加载资源。但是，我们仍然可以通过以下方法进一步优化：

• 禁用不需要的区块： WordPress 允许禁用特定的区块。通过禁用不使用的区块，可以减少加载的JavaScript代码量，从而提升性能。可以使用 allowed_block_types_all 过滤器来限制可用的区块类型。

  add_filter( 'allowed_block_types_all', 'my_allowed_block_types' );
  
  function my_allowed_block_types( $allowed_block_types ) {
      // 允许核心区块中的段落和图片区块
      return array(
          'core/paragraph',
          'core/image',
      );
  }

• 延迟加载非关键脚本： 虽然区块编辑器的核心脚本是必需的，但某些脚本可以延迟加载。例如，一些不常用的组件或库可以等到用户需要时再加载。可以使用 wp_script_add_data 函数来添加 defer 或 async 属性到脚本标签中。但需要注意的是，并非所有脚本都适合延迟加载，需要仔细评估依赖关系。

  function my_defer_scripts( $tag, $handle, $src ) {
      $defer_scripts = array(
          'wp-block-directory', // 示例：延迟加载区块目录脚本
      );
  
      if ( in_array( $handle, $defer_scripts, true ) ) {
          return '<script src="' . esc_url( $src ) . '" defer="defer"></script>' . "n";
      }
  
      return $tag;
  }
  
  add_filter( 'script_loader_tag', 'my_defer_scripts', 10, 3 );

• 代码分割： 如果你的主题或插件引入了大量的自定义区块，可以考虑使用代码分割技术将JavaScript代码分割成更小的块。这样，浏览器只需要加载当前页面所需的代码块，而不是一次性加载所有代码。可以使用Webpack等构建工具来实现代码分割。

• 缓存： 确保服务器启用了适当的缓存策略，以便浏览器可以缓存静态资源，减少重复加载。

• HTTP/2: 使用 HTTP/2 协议可以并行加载多个资源，提高加载速度。

• CDN： 使用内容分发网络（CDN）可以将静态资源分发到全球各地的服务器，提高用户访问速度。

• 移除不必要的区块编辑器样式： WordPress 会加载一些默认的区块编辑器样式，即使你没有使用所有区块。可以使用 wp_dequeue_style 函数移除这些不必要的样式。

  function my_dequeue_block_editor_styles() {
      wp_dequeue_style( 'wp-block-library' ); // 移除默认的区块库样式
  }
  
  add_action( 'enqueue_block_editor_assets', 'my_dequeue_block_editor_styles', 100 );

• 针对特定文章类型禁用 Gutenberg： 虽然 wp_maybe_load_block_editor_scripts_and_styles 已经检查了 $post_type_object->show_in_rest，但如果某些自定义文章类型永远不需要 Gutenberg，可以完全禁用它，从而避免加载任何相关资源。可以使用 use_block_editor_for_post_type 过滤器来实现。

  add_filter( 'use_block_editor_for_post_type', 'my_disable_gutenberg_for_post_type', 10, 2 );
  
  function my_disable_gutenberg_for_post_type( $use_block_editor, $post_type ) {
      if ( 'my_custom_post_type' === $post_type ) {
          return false;
      }
      return $use_block_editor;
  }

• 有条件地加载区块编辑器资源： 如果你的网站只有部分页面需要使用区块编辑器，你可以编写自定义函数来判断当前页面是否需要加载区块编辑器资源，并仅在需要时才调用 wp_enqueue_scripts 和 wp_enqueue_styles 函数。这需要更复杂的逻辑，但可以实现更精细的控制。

5. 性能监控与测试

优化之后，需要进行性能监控和测试，以验证优化效果。可以使用以下工具：

• Google PageSpeed Insights： 分析页面加载速度，并提供优化建议。
• WebPageTest： 提供详细的页面加载时间线，可以帮助你识别性能瓶颈。
• Chrome DevTools： Chrome 浏览器的开发者工具提供了强大的性能分析功能。

6. 实际案例分析

假设我们有一个名为 "Product" 的自定义文章类型，该文章类型使用自定义的元框（meta boxes）而不是区块编辑器。为了避免加载不必要的区块编辑器资源，我们可以使用 use_block_editor_for_post_type 过滤器来禁用 Gutenberg：

add_filter( 'use_block_editor_for_post_type', 'disable_gutenberg_for_product_post_type', 10, 2 );

function disable_gutenberg_for_product_post_type( $use_block_editor, $post_type ) {
    if ( 'product' === $post_type ) {
        return false;
    }
    return $use_block_editor;
}

通过添加这段代码，当编辑 "Product" 文章类型的文章时，WordPress 将不会加载任何区块编辑器资源，从而提升管理界面的加载速度。

7. 与其他函数的关联

wp_maybe_load_block_editor_scripts_and_styles 函数与以下函数密切相关：

• register_post_type(): 在注册文章类型时，show_in_rest 参数决定了该文章类型是否使用REST API，从而影响区块编辑器资源的加载。
• get_current_screen(): 获取当前屏幕的信息，用于判断当前页面是否需要加载区块编辑器资源。
• wp_enqueue_script() 和 wp_enqueue_style(): 注册和加载JavaScript脚本和CSS样式。
• add_action( 'admin_enqueue_scripts', ... ): 在管理界面加载脚本和样式时执行自定义函数。
• add_filter( 'allowed_block_types_all', ... ): 允许开发者通过钩子函数来过滤区块类型
• add_filter( 'use_block_editor_for_post_type', ... ): 允许开发者通过钩子函数来决定是否为特定文章类型启用区块编辑器。

理解这些函数之间的关系有助于你更好地控制区块编辑器资源的加载。

8. 常见问题与解决方案

• 问题： 在不需要区块编辑器的页面加载了区块编辑器资源。

  解决方案： 检查 wp_maybe_load_block_editor_scripts_and_styles 函数的逻辑，确保该函数能够正确判断当前页面是否需要加载区块编辑器资源。检查是否错误地移除了默认的判断条件。

• 问题： 禁用了某个区块，但该区块的样式仍然被加载。

  解决方案： 检查主题或插件是否手动加载了该区块的样式。如果是，需要移除手动加载的代码。

• 问题： 延迟加载了某个脚本，但导致区块编辑器出现错误。

  解决方案： 检查该脚本的依赖关系，确保在加载该脚本之前，所有依赖的脚本都已经加载完成。

9. 代码示例：优化自定义区块的资源加载

假设你创建了一个自定义区块，并且该区块只在特定的页面模板中使用。为了优化资源加载，你可以只在该页面模板中使用时才加载该区块的脚本和样式。

首先，你需要创建一个函数来注册和加载自定义区块的脚本和样式：

function my_register_custom_block() {
    // 注册区块
    register_block_type( 'my-plugin/my-custom-block', array(
        'editor_script' => 'my-custom-block-editor-script',
        'editor_style'  => 'my-custom-block-editor-style',
        'style'         => 'my-custom-block-style',
    ) );

    // 注册脚本
    wp_register_script(
        'my-custom-block-editor-script',
        plugins_url( 'my-custom-block/editor.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'my-custom-block/editor.js' )
    );

    // 注册编辑器样式
    wp_register_style(
        'my-custom-block-editor-style',
        plugins_url( 'my-custom-block/editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'my-custom-block/editor.css' )
    );

    // 注册前端样式
    wp_register_style(
        'my-custom-block-style',
        plugins_url( 'my-custom-block/style.css', __FILE__ ),
        array( 'wp-block-library' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'my-custom-block/style.css' )
    );
}
add_action( 'init', 'my_register_custom_block' );

然后，你需要创建一个函数来判断当前页面是否使用了特定的页面模板，并仅在该页面模板中使用时才加载自定义区块的脚本和样式：

function my_enqueue_custom_block_assets() {
    if ( is_page_template( 'my-custom-template.php' ) ) {
        wp_enqueue_script( 'my-custom-block-editor-script' );
        wp_enqueue_style( 'my-custom-block-editor-style' );
        wp_enqueue_style( 'my-custom-block-style' );
    }
}
add_action( 'enqueue_block_editor_assets', 'my_enqueue_custom_block_assets' );
add_action( 'wp_enqueue_scripts', 'my_enqueue_custom_block_assets' );

通过这种方式，只有当页面使用了 my-custom-template.php 模板时，才会加载自定义区块的脚本和样式，从而避免在不需要的页面加载不必要的资源。

10. 进一步的探索

wp_maybe_load_block_editor_scripts_and_styles 函数只是区块编辑器资源加载的冰山一角。要深入理解区块编辑器的性能优化，还需要研究以下主题：

• 区块编辑器的架构： 理解区块编辑器的内部结构，包括React、Redux等技术，可以帮助你更好地理解其性能瓶颈。
• REST API： 区块编辑器使用REST API与WordPress后端进行通信。理解REST API的原理可以帮助你优化数据传输。
• Gutenberg 项目： 关注Gutenberg项目的最新进展，了解最新的性能优化技术。

总结：资源加载优化的重要性

优化 WordPress 区块编辑器资源的加载是提升网站性能的关键一步。通过理解 wp_maybe_load_block_editor_scripts_and_styles 函数的逻辑并采取适当的优化策略，我们可以确保只在需要时才加载资源，从而提高网站的加载速度和用户体验。同时，持续的性能监控和测试是验证优化效果的必要手段。