Webpack:所有代码拆分块都通过预取下载

Question

我有 3 个主代码拆分块，main.x.js、0.x.js 和 1.x.js。

我正在使用require.ensure进行拆分，并且还尝试了用于拆分的新简单Promise语法。代码拆分本身似乎工作得很好，3 个块得到输出，使用 HTML 可视化工具，我可以看到它们只包含我想要的代码。

但是，当我打开应用程序的主页时，webpack 似乎立即使用主页上的"预取"加载我所有代码拆分的块。我可以在 devtools 中看到它作为目的：预取 0.js 和 1.js 块。主.js"正常"加载。

然后，当我导航到需要 0.x.js 的网站部分时，我可以看到 chrome 触发了"正常"请求来检索 0.x.js。因此，似乎拆分和运行时加载(某种程度上)正常工作。

但是，我不想要这种预取行为，因为我首先使用代码拆分的原因是为了节省用户不会使用的网站部分的带宽。有没有办法关闭这种预取行为？

这是在 webpack 2.7.0 中。

Answer 1

在肖恩的评论后意识到它在这里不是 webpack 的错后，我找到了解决方案。

"问题"是 vue-server-renderer createBundleRenderer 函数，根据这里的文档 https://ssr.vuejs.org/en/api.html#renderer-options，诀窍是 shouldPreload 和 shouldPrefetch 函数。

只需添加：

shouldPrefetch: (file, type) => {
// 0.js, 1.js
return false;
},
shouldPreload: (file, type) => {
// main.js, manifest.js
return true;
},

到createBundleRenderer选项为我解决了这个问题。