Webpack：使用预取下载所有代码拆分块答案

【问题标题】：Webpack: All code splitting chunks being downloaded with prefetchWebpack：使用预取下载所有代码拆分块
【发布时间】：2018-03-04 18:01:12
【问题描述】：

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

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

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

当我导航到需要 0.x.js 的网站部分时，我可以看到 chrome 触发“正常”请求以检索 0.x.js。因此，似乎拆分和运行时加载（有点）正常工作。

但是，我不希望这种预取行为，因为我首先使用代码拆分的原因是为了节省用户从他们不会使用的部分站点的带宽。有什么办法可以关闭这种预取行为？

这是使用 webpack 2.7.0。

【问题讨论】：

您的require.ensure 调用是在您导入的文件的顶层还是在您稍后调用的函数中？（例如，何时调用 require.ensure？）
嗨 Sean，require.ensures 位于顶部，但我使用 Vue 的延迟加载 (router.vuejs.org/en/advanced/lazy-loading.html) 来（希望）仅在需要时加载组件。它确实感觉好像它在 webpack 端，因为当我导航到使用该块的该站点的一部分时，我可以看到一个额外的“正常”请求，例如 1.x.js，这让我认为对于某些人来说原因是所有块都在一开始就被加载，但是这个目的中的附加块：预取模式，这是我不想要的。
我刚查了一下，这和Vue服务器端渲染有关。如果我将它构建为普通的 SPA，那么一切正常。仅在我导航时才加载其他块（即使没有目的：预取）。只有当我将其构建为 vue SSR 应用程序时，Purpose: prefetch 才会应用于主页加载的所有资源。也许有人可以指出我从哪里开始挖掘以找到这里的问题？

标签： webpack vue.js

【解决方案1】：

我找到了解决方案，在 Sean 的评论之后意识到这不是 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 选项为我解决了这个问题。

【讨论】：