如何处理需要的 2 个分割点。确保相同的大模块？

Question

我正在尝试获得一个延迟加载应用程序设置，它仅在您导航时加载它需要的内容。我将 webpack 的代码拆分与 require.ensures 和 react-router 一起使用，但我遇到了问题（或误解）。我的 2 条路线需要（'lodash'），但它被下载了两次，每个 require.ensure 一次。它在这里运行：https://examples-bqxmpefrny.now.sh/huge-apps/，这是实际的提交 github.com/ryankshaw/react-router/commit/a97d77f（我也在 webpack 2.1.0-beta.25 中尝试过，但它仍然没有像我一样工作认为它应该 github.com/ryankshaw/react-router/commit/9396830)

我需要怎么做才能只下载一次“loash”？或者这只是 webpack 不能做的事情？

换句话说，webpack 并没有像我想象的那样做。如果您在 2 个不同的 require.ensures 中需要一个大模块，它将把它捆绑到每个块中，这意味着浏览器最终会下载该模块的代码两次。我希望它足够聪明，可以将在 2 个 require.ensures 之间共享的模块拆分为自己的块，并将其与需要它的 2 个拆分点块中的任何一个并行加载。有没有办法让 webpack 做到这一点？这被认为是一个错误吗？

注意：我不想只使用 commonsChunkPlugin，因为即使该模块在 2 个拆分点之间共享，我也不想将它放在 commons 块中并在每个页面上加载它（想象一个带有比 lodash 更大的依赖关系, 即使应用程序的不同部分使用该模块, 强制应用程序的绝大多数其他部分下载该文件也是浪费. 而且您可以在同一个地方有多个拆分点使用该模块的页面）

Answer 1

here 讨论了同样的问题，他们提出了一个名为 AgressiveMergePlugin 的插件，可以帮助您避免下载库两次。

想象一个大型应用程序，其依赖项远不止 lodash， 即使应用程序的不同部分使用该模块，它也会是 强迫应用程序的绝大多数其他部分 下载那个文件

对于上面引用的声明，您可以使用具有 Tree-shaking 功能的 Webpack 版本 >= 2.0 仅捆绑 required 或 imported 模块/导出。