如何在Vue运行时共享第三方包？多应用依赖缓存方案

针对你的需求（多个独立Vue应用共享运行时依赖、避免重复下载），以下是几种可行的实现方案，均无需依赖Monorepo：

1. CDN全局引入 + 构建时外部化依赖 #

将所有应用共用的第三方包（如Vue、Axios、Element Plus等）通过CDN提前引入到容器应用的入口HTML中，同时让每个子Vue应用在构建配置中标记这些包为"外部依赖"——即打包时不将它们打入自身bundle，运行时直接调用全局环境中的实例。

配置示例： #

容器应用入口HTML（index.html）

<!-- 引入共享依赖，注意使用带版本号的稳定地址 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.4.2/dist/index.min.css">
<script src="https://cdn.jsdelivr.net/npm/element-plus@2.4.2/dist/index.full.min.js"></script>

Vue子应用构建配置

• Webpack：在webpack.config.js中添加externals配置

module.exports = {
  externals: {
    vue: 'Vue',       // 对应全局变量Vue
    axios: 'axios',   // 对应全局变量axios
    'element-plus': 'ElementPlus'  // 对应全局变量ElementPlus
  }
}

• Vite：在vite.config.js中配置外部依赖

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['vue', 'axios', 'element-plus']
    }
  },
  optimizeDeps: {
    exclude: ['vue', 'axios', 'element-plus'] // 跳过依赖预构建
  }
})

核心优势： #

• 利用CDN的全局缓存能力，用户首次加载后，所有子应用都可直接复用浏览器缓存的依赖包
• 子应用bundle体积大幅减小，加载速度更快

2. Webpack Module Federation 模块联邦 #

通过Webpack 5的Module Federation特性，将容器应用作为"宿主"暴露共享依赖模块，子应用作为"远程应用"直接引用这些共享模块，实现运行时的依赖共享。

配置示例： #

容器应用Webpack配置

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',       // 宿主应用名称
      filename: 'remoteEntry.js', // 暴露模块的入口文件
      exposes: {
        './vue': 'vue',        // 暴露Vue模块
        './axios': 'axios',    // 暴露Axios模块
        './element-plus': 'element-plus' // 暴露Element Plus模块
      }
    })
  ]
}

子应用Webpack配置

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',            // 子应用名称
      remotes: {
        // 引用宿主暴露的模块，格式：[宿主名称]@[宿主远程入口地址]
        container: 'container@http://your-container-domain/remoteEntry.js'
      }
    })
  ]
}

子应用中引用共享依赖

// 直接从宿主容器引入，无需本地安装
import Vue from 'container/vue';
import axios from 'container/axios';
import ElementPlus from 'container/element-plus';

核心优势： #

• 依赖模块由宿主统一管理，版本一致性有保障
• 子应用无需单独打包共享依赖，运行时动态加载宿主提供的模块

3. 静态资源公共目录 + 强缓存策略 #

如果不想依赖CDN，可以将共享依赖包部署到统一的静态资源目录（如/static/shared-libs/），所有子应用都引用该目录下的资源，并通过HTTP缓存头（如Cache-Control: max-age=31536000, immutable）设置长期缓存，确保浏览器一旦下载就不会重复请求。

注意事项： #

• 所有应用必须使用完全相同版本的依赖包，避免版本冲突
• 依赖包文件名需包含版本哈希（如vue@3.3.4.min.js），版本更新时通过文件名变更触发浏览器重新下载

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