在 WordPress 中本地托管插件中的第三方 CDN 资源，加快页面打开速度

我们知道，如果网站中使用过多的第三方资源会导致页面的加载和渲染速度变慢，为了优化页面的打开速度，我们需要在本地托管主题或插件中的第三方CDN资源。

本文将带大家一起了解一下，怎么在自己的服务器上托管插件中的CDN资源。以达到加快页面打开速度的目的，我们以 Font Awesome 字体图标资源为例。

首先要找出插件加载第三方资源的方式

在插件代码中搜索相关代码，我们可以很轻松的找到 Font Awesome 资源的加载方式。这些资源一般是通过 wp_enqueue_style 和 wp_enqueue_script 函数来添加的。

我们还可以搜索页面HTML源码中的 JS 或 CSS ID 来查找资源，比如页面中的CSS资源ID为 「font-awesome-css」，我们去掉 「-css」，剩下的字符串就是这个资源的ID，JS同理。

wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

下载第三方资源并通过主题或插件加载

我们可以直接下载上面的 CSS 文件，保存到主题目录中，然后在主题中加载，一般在字体文件中，除了CSS文件，我们还需要下载CSS文件中包含的字体资源，以 Font Awesome 为例，我们需要下载：

• CSS文件（all.min.css） : 可能需要修改字体文件的路径
• 字体文件（*.woff2, *.ttf等）

然后我们使用下面的函数来反注册 CDN 资源，然后加载主题中下载好的资源。

function wprs_replace_fontawesome_cdn() {
    // 首先取消原有的Font Awesome加载
    wp_dequeue_style('font-awesome');
    wp_deregister_style('font-awesome');
    
    // 注册本地版本
    wp_enqueue_style(
        'font-awesome-local',
        get_template_directory_uri() . '/assets/fontawesome/css/all.min.css',
        array(),
        '6.0.0'
    );
}
add_action('wp_enqueue_scripts', 'wprs_replace_fontawesome_cdn', 20);

通过插件加载本地资源

如果不方便修改主题，或者主题以后需要升级，为了避免升级后我们的修改被覆盖，我们还可以创建一个小插件，来实现一样的目的，下面是示例插件。

<?php
/*
Plugin Name: Local Font Awesome
Description: Load Font Awesome locally instead of from CDN
Version: 1.0
*/

function local_fontawesome_init() {
    // 同样的替换逻辑
    wp_dequeue_style('font-awesome');
    wp_deregister_style('font-awesome');
    
    wp_enqueue_style(
        'font-awesome-local',
        plugins_url('assets/fontawesome/css/all.min.css', __FILE__),
        array(),
        '6.0.0'
    );
}
add_action('wp_enqueue_scripts', 'local_fontawesome_init', 20);

实施过程中需要注意的事项：

• 确保替换函数的优先级(20)高于原插件加载的优先级
• 本地文件的版本号要与CDN版本匹配
• 检查文件权限确保web服务器可以访问
• 考虑使用浏览器缓存提升性能

如果您的网站使用了比较多的第三方CDN资源，通过本地托管了这些CDN资源后，相信您一定会发现，页面打开的速度变快了。