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

Question

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

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

能请人回顾一下并提出建议吗？

使用以下代码的I：

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";
    }
}

Answer 1

这是你问题的解决方案。这并没有考虑到是否应该将async或defer添加到特定资产中的优点，它只是给您提供了自己动手或不使用的工具。

值得注意的一点：

• 这只适用于Javascript包含(显然)
• 由于替换标记文本的方法，这并不是100%的精确性，但是对于99.9%的javascript包含您所拥有的内容，它会做得很好。
• 有一个选项可以指定哪些包含应该有async和defer标记，只需添加要应用它的资产的句柄即可。我已经为初学者包括了JQuery。
• 这段代码同时添加了defer="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 );