Webpack 2 - 代码分割顶级依赖项

最终编辑

总的结论是这是不可能的。尽管下面的最佳答案确实有一些很好的信息。

考虑下面的代码，来自contacts.js。这是一个动态加载的模块，按需加载System.import代码中的其他地方。

If SharedUtil1也用于其他模块这也是动态加载System.import，我该如何去拥有SharedUtility1 excluded from all这些模块，并且仅按需加载第一次需要吗？

一个顶级的System.import of SharedUtil1不起作用，因为我的导出依赖于它：导出只能放置在模块代码的顶层，而不能放置在任何类型的回调中。

这可以用 Webpack 实现吗？我使用的是 2.0.7 测试版。

import SharedUtil1 from '../../SharedUtilities/SharedUtility1';

class Contacts{
    constructor(data){
        this.data = data;
        this.sharedUtil1 = new SharedUtil1();
    }
}

export default Contacts;

UPDATE 1

我以为捆绑装载机 https://github.com/webpack/bundle-loader是我想要的，但是不，这会将您导入的模块转换为一个不同的函数，一旦异步加载完成，您就可以通过回调调用该函数以获取实际模块。这意味着您无法在不对代码进行重大更改的情况下透明地使模块 X 异步加载，更不用说您又回到了最初描述的问题，即如果您的顶级模块依赖于 now-asynchronously加载的依赖项，无法导出它，因为导出必须位于顶层。

Webpack 中是否没有办法表示依赖项 X 将在需要时按需加载，并且有任何导入它的导入模块以透明地等待导入过程？我认为这个用例是必要条件对于任何远程大型应用程序，所以我不得不认为我只是错过了一些东西。

UPDATE 2

根据 Peter 的回答，我尝试让重复数据删除工作，因为 commonChunk 插件与端点之间共享代码有关，正如他提到的那样，因为require.ensure将加载的代码放入回调中，从而阻止您使用 ES6export任何依赖于它的代码。

就重复数据删除而言，contacts.js and tasks.js两者都加载相同的sharedUtil，如下所示

import SharedUtil1 from '../../sharedUtilities/sharedUtility1';

我尝试运行 webpack 作为

webpack --optimize-dedupe

并且还通过添加

plugins: [
    new webpack.optimize.DedupePlugin()
]

到 webpack.config。在这两种情况下，sharedUtil 代码仍然放置在联系人和任务包中。

读了你的博文后我终于明白你的意图了。我对“顶级依赖项”这个词有点困惑。

您有两个模块（async-a and async-b）可以从任何地方按需加载（这里是一个模块main）并且两者都有共享模块的引用（shared).

- - -> on-demand-loading (i. e. System.import)
---> sync loading (i. e. import)

main - - -> async-a ---> shared
main - - -> async-b ---> shared

默认情况下，webpack 创建一个像这样的块树：

---> chunk uses other chunk (child-parent-relationship)

entry chunk [main] ---> on-demand chunk 1 [async-a, shared]
entry chunk [main] ---> on-demand chunk 2 [async-b, shared]

这很好，当shared < async-a/b或概率async-a and async-b同一用户同时使用的比例较低。这是默认设置，因为它是最简单的行为，并且可能是您所期望的：一System.import=> 一大块。在我看来，这也是最常见的情况。

But if shared >= async-a/b以及概率async-a and async-b用户加载的数据量很高，有一个更有效的分块选项：（有点难以想象）：

entry chunk [main] ---> on-demand chunk 1 [async-a]
entry chunk [main] ---> on-demand chunk 2 [async-b]
entry chunk [main] ---> on-demand chunk 3 [shared]

When main requests async-a: chunk 1 and 3 is loaded in parallel
When main requests async-b: chunk 2 and 3 is loaded in parallel
(chunks are only loaded if not already loaded)

这不是默认行为，但有一个插件可以将其存档：CommonChunkPlugin在异步模式下。它在一堆块中找到公共/共享模块，并创建一个包含共享模块的新块。在异步模式下，它确实与原始（但现在更小）块并行加载新块。

new CommonsChunkPlugin({
    async: true
})

// This does: (pseudo code)
foreach chunk in application.chunks
  var shared = getSharedModules(chunks: chunk.children, options)
  if shared.length > 0
    var commonsChunk = new Chunk(modules: shared, parent: chunk)
    foreach child in chunk.children where child.containsAny(shared)
      child.removeAll(shared)
      foreach dependency in chunk.getAsyncDepenendenciesTo(child)
        dependeny.addChunk(commonsChunk)

请记住，CommonsChunkPlugin 有一个minChunks定义模块何时线程化的选项shared（随意提供自定义函数来选择模块）。

这是一个详细解释设置和输出的示例：https://github.com/webpack/webpack/tree/master/examples/extra-async-chunk https://github.com/webpack/webpack/tree/master/examples/extra-async-chunk

另一种配置更多：https://github.com/webpack/webpack/tree/master/examples/extra-async-chunk-advanced https://github.com/webpack/webpack/tree/master/examples/extra-async-chunk-advanced