webpack构建中相同版本的重复模块答案

【问题标题】：Duplicate modules of same version in webpack buildwebpack构建中相同版本的重复模块
【发布时间】：2018-06-29 10:01:39
【问题描述】：

我使用 Webpack (4.12) 构建使用 yarn (1.2.1) 安装的模块的应用程序。它由yarn.lock 控制，使用具有自己的yarn.lock 文件的内部（公司）模块列表等等。

我发现相同版本的模块在应用程序包中重复了很多。就像 lodash 被收录 9 次。我开始查看版本，发现 9 个副本只是 lodash 的 2 个不同版本。然后我查看了包含它们的依赖项，这是lodash（带有别名）的哪些模块依赖项的结果：

(^4.16.4 / 4.17.4) application
(^4.17.2 / 4.17.5) @grp/libA
(^4.16.4 / 4.17.4) @grp/libA / @grp/libB
(^4.16.4 / 4.17.4) @grp/libA / @grp/libC
(^4.17.4 / 4.17.5) @grp/libD
(^4.16.4 / 4.17.4) @grp/libD / @grp/libE
(^4.17.2 / 4.17.5) @grp/libF
(^4.16.4 / 4.17.4) @grp/libF / @grp/libG
(^4.16.4 / 4.17.4) @grp/libF / @grp/libG

括号中的数字表示package.json中的版本，以及node_modules中的实际版本（与yarn install一起安装）。

我了解不同版本的模块可能需要复制以避免错误，但即使yarn在每个模块中安装了子模块（如@grp/libA / @grp/libB和@grp/libA / @grp/libC下的lodash），每个模块都拥有node_modules， webpack 不应该看到它们包含相同版本的 lodash，并且至少将其减少到只有 4.17.4 和 4.17.5 的两个副本？

【问题讨论】：

标签： javascript webpack yarnpkg

【解决方案1】：

我在使用以下结构的项目中遇到了同样的问题：

src/
node_modules/
  |_ ...
  |_ ui
      |_ node_modules
      |_ src/

为了防止重复供应商，我使用了resolve 属性，例如：

{
    resolve: {
        modules: [
            path.resolve(__dirname, 'node_modules'),
            path.resolve(__dirname, 'node_modules/ui/node_modules'),
        ],
    },
}

更多详细信息可在the official doc 上找到，但总而言之，它强制 Webpack 按此确切顺序检查这些文件夹中的依赖项。

希望对您有所帮助！ :)

【讨论】：

【解决方案2】：

这里有一些步骤可以帮助您减少 webpack 构建中的重复包。让我们以 lodash 捆绑多次为例。

根据lodash 手动升级或降级软件包，以便在src目录中运行npm ls lodash 或yarn list lodash 时获得尽可能少的版本。 npm 的示例输出：

我的回购@0.0.1
├─┬ module-1@1.0.0
│ └── lodash@x.x.x
├─┬ module-2@A.B.C
│ └── lodash@x.x.x
└── lodash@x.x.x
然后，运行 npm dedupe 或 yarn dedupe 以便包管理器完成解决重复依赖项的工作。然后，您应该会在相关包旁边看到“重复数据删除”提及：

我的回购@0.0.1
├─┬ module-1@1.0.0
│ └── lodash@x.x.x 去重
├─┬ module-2@A.B.C
│ └── lodash@x.x.x 去重
└── lodash@x.x.x

您也可以尝试从头开始再次删除 package-lock.json 和 npm 或 yarn install 所有依赖项，以尽量减少不同版本的重复。

【讨论】：