Nuxt插件全局注册与手动导入对比：多仓库API插件最优方案选型

疑问解答 #

全局注册未使用的仓库会不会产生额外开销？ #

会，这种做法确实不属于最优实践：

• 所有在nuxt.config.js的plugins数组中注册的插件，都会被打包进应用的初始公共包，应用启动时全部加载执行，不管对应页面有没有用到，既会增大首屏加载的JS体积，也会让所有注入的仓库实例一直挂载在Nuxt全局实例上，产生不必要的内存占用。单仓库的开销很小，但数量达到数十个时，累积的性能影响就会显现。
• 全局注入的冗余资源还会增加调试成本，后续维护时无法快速判断某个仓库的使用范围。

数十个仓库全部全局注册是否合理？ #

不合理，推荐使用按需导入+自动上下文注入的方案，兼顾开发便捷性和性能：

最优实现方案

1. 先改造仓库为工厂函数，接收上下文依赖（比如axios实例）返回操作对象：

// plugins/repos/UserRepository.js 示例
export default (axios) => ({
  getAll() {
    return axios.$get("/users")
  }
})

PostRepository按相同规则改造即可。

2. 新增通用composable封装上下文获取逻辑，利用Nuxt自动导入能力免去手动注册、传参的步骤：

// composables/useRepo.js （Nuxt会自动识别composables目录下的文件，无需手动注册）
import UserRepository from "~/plugins/repos/UserRepository"
import PostRepository from "~/plugins/repos/PostRepository"

const repoFactoryMap = {
  user: UserRepository,
  post: PostRepository
}

export const useRepo = (repoName) => {
  // 内部自动获取Nuxt全局上下文，无需调用方传递
  const { $axios } = useNuxtApp()
  return repoFactoryMap[repoName]($axios)
}

3. 页面中按需调用即可：

// /views/users.vue 中只需要调用对应仓库，无需导入无关的PostRepository
const userRepo = useRepo('user')
const userList = await userRepo.getAll()

方案优势

• 无冗余加载：只有页面实际用到的仓库才会被打包进对应页面的资源包，不会增大首屏体积，也不会占用全局内存
• 开发效率高：不需要手动传context，不需要频繁修改nuxt.config注册新插件，新增仓库只需要在repoFactoryMap中加一行映射即可
• 可维护性强：可以清晰追踪每个仓库的使用范围，全局只有useRepo一个自动导入的API，不会污染全局命名空间

如果确实需要保留全局注入的用法，也可以给插件配置mode参数区分客户端/服务端加载，减少不需要的端的加载开销，但优化效果远不如按需导入方案。

内容的提问来源于stack exchange，提问作者habib