Question

我使用 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在每个模块中都安装了子模块（例如lodash和@grp/libA / @grp/libB下的子模块模块拥有@grp/libA / @grp/libC，webpack不应让Webpack看到它们包含相同版本的lodash，并且至少将其简化为node_modules和4.17.4的两个副本吗？

Answer 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按照确切的顺序检查这些文件夹中的依赖项。

希望有帮助！：）

Answer 2

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

根据 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，以便包管理器完成解决重复依赖项的工作。然后，您应该会在相关包旁边看到“重复数据删除”提及：

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

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

Webpack构建中相同版本的重复模块

2 个答案: