自动将DEFER或ASYNC添加到所有JS文件(无论它们位于何处)

时间:2021-06-12 作者:Harold Aldersen

我正在寻找一种自动添加defer 到我服务器上的所有JS文件。虽然我找到了一种似乎有效的方法,但我不确定这是否是2021 WordPress的最佳方法/最佳实践?

我正在使用PHP 7.4在XAMPP上运行一个测试环境。x和最新的WordPress(5.7.2)。我已在中打开调试wp-config 虽然我没有收到任何错误或通知,但我还是不确定这是最好的方法/最佳实践。

有人能回顾一下并提出建议吗?

I am using this code:

add_filter( \'clean_url\', \'auto_defer_all_js_and_jquery\', 11, 1 );
function auto_defer_all_js_and_jquery( $url ) {

    if ( false === strpos($url, \'.js\') ) {

        return $url;
    }

    if ( !false === strpos($url, \'.js\') ) {

        return "$url\' defer=\'defer";
    }
}

1 个回复
最合适的回答,由SO网友:Paul G. 整理而成

这是你问题的答案。这并没有考虑您是否应该添加asyncdefer 对于某些资产,它只是给了你自己做或不做的工具。

注意事项:

这只适用于Javascript包含(显然),由于采用了替换标记文本的方法,因此它不是100%准确,但对于99.9%的Javascript包含,它可以很好地完成工作async 和defer 标记,只需添加要将其应用到的资产的句柄。我为初学者提供了JQuerydefer="defer" 和async. 只需删除适当的if 如果这不是你想要的

function add_async_to_js( $includeTag, $handle ) {

    $handlesToChange = [
        \'jquery\'
    ];

    if ( in_array( $handle, $handlesToChange ) ) {
        if ( strpos( $includeTag, \' defer=\' ) === false ) {
            $includeTag = str_replace( \' src=\', \' defer="defer" src=\', $includeTag );
        }
        if ( strpos( $includeTag, \' async\' ) === false ) {
            $includeTag = str_replace( \' src=\', \' async src=\', $includeTag );
        }
    }
    return $includeTag;
}

add_filter( \'script_loader_tag\', \'add_async_to_js\', 10, 2 );