Laravel Mix构建时vendor.js出现重复包问题的解决方法咨询

这问题我之前碰到好多次了，本质就是本地子包各自维护自己的依赖树，导致webpack（Laravel Mix基于它）打包时把同一份依赖重复塞进vendor.js里。给你几个循序渐进的实用方案：

方案一：用Monorepo统一管理所有本地包 #

这是最彻底的解决方案，把所有本地包放到同一个根项目下，利用npm/yarn/pnpm的Workspaces功能共享依赖，从根源避免重复安装。

• 先把你的本地包都放到根目录的packages文件夹下（比如packages/package-a、packages/package-b）
• 根目录的package.json里添加Workspaces配置：

{
  "name": "your-root-project",
  "workspaces": [
    "packages/*"
  ]
}

• 执行npm install（或yarn install/pnpm install），根目录会生成统一的node_modules，所有子包都会共享这里的依赖，打包时自然不会出现重复。

方案二：配置Webpack别名强制指向主项目依赖 #

如果暂时不想调整项目结构，可以在主项目的Mix配置里给共享依赖设置别名，让所有本地包都使用主项目的依赖版本：

• 在webpack.mix.js中添加webpack配置：

const path = require('path');

mix.js('index.js','dist/app.js')
  .vue()
  .extract()
  .webpackConfig({
    resolve: {
      alias: {
        'vue': path.resolve(__dirname, 'node_modules/vue'),
        'jquery': path.resolve(__dirname, 'node_modules/jquery')
        // 其他重复的依赖都可以照这个格式添加
      }
    }
  });

这样不管哪个本地包引用Vue或jQuery，都会被解析成主项目node_modules里的版本，彻底杜绝重复打包。

方案三：将共享依赖设为Peer Dependencies #

修改每个本地包的package.json，把Vue、jQuery这类公共依赖从dependencies移到peerDependencies中：

{
  "name": "your-local-package",
  "peerDependencies": {
    "vue": "^3.0.0", // 匹配主项目的版本范围
    "jquery": "^3.6.0"
  }
}

Peer Dependencies的作用是告诉包管理器：这个包依赖这些库，但不自己安装，而是使用宿主项目（也就是你执行Mix编译的主项目）提供的版本。这样本地包不会自带这些依赖，打包时只会用主项目的那一份。

额外优化：细化SplitChunks配置（可选） #

如果前面的方案还没完全解决，可以调整Webpack的SplitChunks规则，强制把重复依赖合并到同一个chunk：

mix.webpackConfig({
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](vue|jquery)[\\/]/,
          priority: 10,
          enforce: true // 强制把匹配的依赖打包到vendor组
        }
      }
    }
  }
});

这个配置会把所有来自node_modules的Vue和jQuery都统一打包到vendor.js里，避免分散重复。

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