VueJS 中动态加载外部 JS 脚本：按需加载脚本的最佳实践

2024-03-11 16:11:39

在 VueJS 组件中动态加载外部 JS 脚本

引言

在 VueJS 应用程序中，有时候需要根据需要动态加载外部 JS 脚本。例如，当用户访问特定页面或组件时，可能需要加载支付网关或其他第三方库的脚本。手动将这些脚本添加到 index.html 文件中会带来性能问题，因为它们会在应用程序启动时加载，即使它们不被立即需要。

解决方案：使用 VueJS 插件

为了解决这个问题，我们可以使用 VueJS 插件来动态加载外部脚本。插件是一种可重用模块，可以添加到 VueJS 应用程序中，以扩展其功能。

步骤 1：创建插件

创建一个名为 external-scripts.js 的新文件，并将其粘贴到项目的 plugins 目录中。在文件中，编写以下代码：

import Vue from 'vue'

Vue.use({
  install(Vue) {
    // 添加脚本加载方法
    Vue.prototype.$loadScript = function(url) {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.onload = resolve
        script.onerror = reject
        document.head.appendChild(script)
      })
    }
  }
})

这个插件添加了一个 $loadScript 方法到 Vue 实例的原型中，该方法可以用来加载外部脚本。

在组件中加载脚本

步骤 2：在需要加载脚本的组件中

在需要加载脚本的组件的 mounted 生命周期钩子中，使用 $loadScript 方法加载脚本。例如：

export default {
  mounted() {
    // 加载需要的脚本
    this.$loadScript('https://example.com/script1.js')
    this.$loadScript('https://example.com/script2.js')
  }
}

在路由守卫中加载脚本

步骤 3：在路由守卫中加载脚本

如果需要在用户导航到特定路由时加载脚本，可以使用路由守卫。在 router.js 文件中，添加以下代码：

import VueRouter from 'vue-router'

const router = new VueRouter({
  routes: [
    {
      path: '/my-component',
      component: MyComponent,
      beforeEnter(to, from, next) {
        // 在进入路由之前加载脚本
        Vue.prototype.$loadScript('https://example.com/script1.js')
        Vue.prototype.$loadScript('https://example.com/script2.js')
        next()
      }
    }
  ]
})