使用 splitChunks cacheGroups commons 时，webpack 代码重复删除不起作用

Question

我有一个 lerna 项目，其中包含两个相同的包（名为 p1 和 p2）

p1 和 p2 都包含一个第 3 方包——在这个测试中我使用了 eosjs@beta，大约 50KB

如果我随后创建一个示例 React 项目并包含 P1，包大小会按预期增加 50KB，但令我惊讶的是，当我添加 p2 时……它又增加了 50KB。

有人会认为，因为 p1 和 p2 使用相同的第 3 方库，所以对该库的引用将被编译到示例项目中。但这似乎不是发生的事情。

示例回购：https://github.com/warrick-eosny/sizetest

包的增长情况如下：

ls examples/sizetest/build/static/js/-lah

在我引用 p1 之前

    117K 1.13eeb203.chunk.js     
    1.4K main.2170ea98.chunk.js  
    1.5K runtime~main.229c360f.js

引用p1后

    165K 1.75baab58.chunk.js  
    3.7K main.36960386.chunk.js  
    1.5K runtime~main.229c360f.js

引用 p1 和 p2 后

    212K 1.57bb37cb.chunk.js  
    6.4K main.491260eb.chunk.js  
    1.5K runtime~main.229c360f.js

示例文件夹中的项目是使用以下方法创建的：

npx create-react-app sizetest –typescript

p1 和 p2 包都是使用以下方法创建的：

哟 node-typescript-webpack

为什么示例构建不断增长.. webpack 足够聪明，只包含一个引用。

=============== 更新 ==================

这里的 "removing duplicate code" 部分似乎应该可以解决我的问题： https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/#spitting_code_by_multiple_entry_points

但这似乎并没有这样做。

我在项目文件夹中运行 "yarn eject" 然后添加了建议的配置：https://github.com/warrick-eosny/sizetest/blob/master/examples/sizetest/config/webpack.config.js#L196-L211
删除了丑陋的部分，以便输出可读
运行再次构建

这确实会生成一个公共文件，但是当您查看内容时：

grep \@module build/static/js/commons.bd2f73cb.chunk.js

可以看到代码还在重复

 * @module Serialize
 * @module Numeric
 * @module RPC-Error
 * @module Serialize
 * @module Numeric
 * @module RPC-Error
 * @module API
 * @module JSON-RPC
 * @module API
 * @module JSON-RPC

Answer 1

作为概念的 monorepo 和作为工具的 Lerna 都不是为了做这种隐含的 "improvements"。这可能会产生不需要的副作用（例如，如果 P1 和 P2 依赖于 eosjs 的不同版本，或者每个包启动某个包的自己的实例 class）。

反对做你在这里期望的事情的另一个原因是，monorepo 中的包仍然可以彼此独立部署，因为它们不依赖于包的相同引用。

据我所知，使用 monorepo 是实现您所寻找目标的唯一方法。然而，monorepo 只是在一个地方管理你的代码库。如果你想在你的两个包中使用相同的 eosjs 引用，将它向上移动到根级别 package.json，但是你还必须处理一堆你可能不会遇到的其他问题期待呢。您可以为自己维护的 monorepo 包手动执行此操作，或者 通过使用 Lerna 提升外部包：https://github.com/lerna/lerna/blob/master/doc/hoist.md

Yarn Workspaces 是 Lerna 在引擎盖下用来实现提升的，也可能有助于理解。

Webpack 不知道在 monorepo 中，除非你也以某种方式告诉它。它独立于 Lerna 或 monorepos 工作。

使用 splitChunks cacheGroups commons 时，webpack 代码重复删除不起作用

webpack code de-duplication not working when using splitChunks cacheGroups commons

javascript

npm

webpack

lerna