webpack构建中出现相同版本的重复模块

Question

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

我发现应用程序包中同一版本的模块被大量复制。例如，lodash 被包含了 9 次。我开始查看版本，并发现这 9 份副本只是 2 个不同版本的 lodash。然后我研究了包含它们的依赖关系，以下是依赖于 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已经在每个模块自己的node_modules下安装了子模块(如@grp/libA / @grp/libB和@grp/libA / @grp/libC下的lodash)，webpack也应该看到它们包含相同版本的lodash，至少将其减少到只有4.17.4和4.17.5这两个副本，对吗？

- henit

Answer 1

以下是一些步骤，可以帮助您减少在webpack构建中的重复包。让我们以您使用的lodash被多次捆绑的示例为例。

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

  my-repo@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，让包管理器解决重复的依赖关系。然后，您应该会看到相关软件包旁边有一个“deduped”提醒：

  my-repo@0.0.1
  ├─┬ module-1@1.0.0
  │ └── lodash@x.x.x deduped
  ├─┬ module-2@A.B.C
  │ └── lodash@x.x.x deduped
  └── lodash@x.x.x

您也可以尝试删除 package-lock.json 并从头开始 npm 或 yarn install 所有依赖项，以最小化不同版本的重复。

- Dabrule

Answer 2

我曾遇到同样的问题，在一个使用以下结构的项目中：

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

为了避免重复的供应商，我使用了 resolve 属性，如下所示：

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

更多细节请参考官方文档, 简单来说，这会强制Webpack按照这个顺序检查依赖文件夹中的内容。希望对你有所帮助！ :)

- Jonathan Petitcolas