如何在 Nuxt 3 中异步加载脚本以提升性能？

：在构建现代 Web 应用时，确保页面加载速度和性能是至关重要的。特别是当你需要在每个页面中加载第三方分析脚本或其他外部 JavaScript 时，将这些脚本异步加载可以显著提升页面性能。在 Nuxt 3 中，我们可以通过多种方式来实现这一点。本文将介绍如何在 Nuxt 3 中配置这些脚本，并确保它们在页面加载后执行。

方法一：通过 nuxt.config.js 配置脚本

在 Nuxt 3 中，你可以通过 nuxt.config.js 配置文件来添加全局脚本。以下是如何配置 defer 属性来确保脚本异步加载的示例：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          hid: 'gtag',
          children: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-xxxxxxxxxx');
          `,
          type: 'text/javascript',
          defer: true
        },
        {
          hid: 'baidu-analytics',
          children: `
            var _hmt = _hmt || [];
            (function() {
              var hm = document.createElement("script");
              hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxx";
              var s = document.getElementsByTagName("script")[0];
              s.parentNode.insertBefore(hm, s);
            })();
          `,
          type: 'text/javascript',
          defer: true
        }
      ],
      __dangerouslyDisableSanitizersByTagID: {
        'gtag': ['children'],
        'baidu-analytics': ['children']
      }
    }
  }
})

在上述配置中：

• children 属性用于内联脚本代码。
• defer 属性确保脚本在 HTML 解析完成后才执行。
• __dangerouslyDisableSanitizersByTagID 用于禁用指定脚本的 HTML 转义，确保脚本能正确执行。

方法二：使用插件动态插入脚本

对于更复杂的需求或为了避免配置文件中的类型错误，另一种方法是通过 Nuxt 插件来动态插入脚本。这种方法能确保脚本在客户端加载时异步执行，并且灵活性更高。

1. 创建插件

   在 plugins 目录下创建一个新的插件文件，比如 plugins/analytics.js：

   export default defineNuxtPlugin((nuxtApp) => {
     if (process.client) {
       const gtagScript = document.createElement('script');
       gtagScript.innerHTML = `
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
         gtag('config', 'xxxxxxxxxxx');
       `;
       gtagScript.defer = true;
       document.head.appendChild(gtagScript);
   
       const baiduScript = document.createElement('script');
       baiduScript.innerHTML = `
         var _hmt = _hmt || [];
         (function() {
           var hm = document.createElement("script");
           hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxx";
           var s = document.getElementsByTagName("script")[0];
           s.parentNode.insertBefore(hm, s);
         })();
       `;
       baiduScript.defer = true;
       document.head.appendChild(baiduScript);
     }
   });
   

2. 在 nuxt.config.js 中注册插件

   import { defineNuxtConfig } from 'nuxt'
   
   export default defineNuxtConfig({
     plugins: [
       '~/plugins/analytics.js'
     ]
   })
   

这种方法允许你在客户端动态加载脚本，避免了在 nuxt.config.js 中直接配置时可能出现的类型错误和安全问题。

总结

无论是通过 nuxt.config.js 进行配置，还是通过插件动态插入脚本，确保脚本异步加载对提升页面性能和用户体验至关重要。根据你的需求和项目复杂性，选择合适的方法来配置和管理你的脚本，将有助于构建更高效、更流畅的 Web 应用。