3

我有一个包含多个条目和一个公共块的 webpack 构建。有时我会加载，entry1有时我会加载entry1和entry2，有时会加载条目 2 和 3。无论如何，我总是包含公共块。

一切似乎都很好，捆绑的文件很好。但是运行时似乎有问题。当我需要两个条目并且它们都依赖于某个模块（即在公共文件中）时。该模块被评估两次。

简单的例子：

entry1.js

require('./dep.js');

entry2.js

require('./dep.js');

deps.js

alert('called')
module.exports = 2;

在这里，我看到警报被调用了两次。我期待 webpack 做类似的事情node.js并缓存需求。

我仔细检查了文件的内容deps.js确实在common.js文件中，并通过在显示上放置一个断点来alert多次调用相同的代码。这不是预期的。

有没有办法解决这个问题？

4

2 回答 2

3

如果这是 webpack 4，你应该使用optimization.runtimeChunk: 'single`，就像文档中建议的那样。否则，每次都会根据文档初始化模块：

导入的模块分别为每个运行时块初始化，因此如果您在页面上包含多个入口点，请注意这种行为。您可能希望将其设置为单一或使用另一种允许您只有一个运行时实例的配置。

于 2020-06-24T14:01:58.593 回答
1

我对 vue cli MPA（多页应用程序）有同样的问题

除了@Herz3h 给出的解决方案之外，我还通过在每个页面的块列表中添加“运行时”来解决

这是vue.config.js应该的样子

module.exports = {
  pages: {
    page1: {
      entry: 'src/pages/1/main.js',
      chunks: [
        'chunk-vendors',
        'chunk-common',
        'runtime', //Make sure you add this in your chunks
        'page1',
      ]
    }
  },
  configureWebpack() {
    return {
      optimization: {
        runtimeChunk: 'single',
      },
    }
  }
}
于 2020-07-14T17:19:36.823 回答