代码拆分在 vue-cli 生成的项目上无法正常工作答案

【问题标题】：code splitting not working properly on vue-cli generated project代码拆分在 vue-cli 生成的项目上无法正常工作
【发布时间】：2020-06-30 03:43:24
【问题描述】：

几年前我创建了一个 vue 项目，我总是“感觉”第一次加载太慢。我花了一段时间才意识到整个应用程序是在第一页加载的，比如“/”。

我尝试按照说明 (https://router.vuejs.org/guide/advanced/lazy-loading.html#lazy-loading-routes) 进行操作，但第一次加载只会加载整个应用程序。

我的项目越来越大，虽然它的设计存在问题，但在使用 vuejs 的时间更长之后，从这个角度来看，一切似乎都很好。

所以今天我决定修复它。为此，我尽可能地简化了项目以复制它。而我做到了。

问题是，即使我使用这种语法：() => import(/* webpackChunkName: "ThisShouldNotBeLoaded" */ '../components/Fail.vue') 每当我请求不需要该模块的路由时，都会加载该模块（开发工具 => 检查 => 网络，你会看到它“通过”网络）。

我不明白这是 vuejs 问题、设计问题、webpack 问题还是其他问题，可能是依赖项导致了这种情况，不知道在哪里查找。

好消息是我能够复制它。这可能是个问题，但我不知道在哪里（webpack、vuejs、vue-cli 等）。

如果你有 5 分钟的时间，请克隆这个 repo，看看你是否明白发生了什么。

谢谢！

回购：https://github.com/nriesco/vuex-router-webpack-test

【问题讨论】：

标签： webpack lazy-loading vue-cli dynamic-import

【解决方案1】：

这个问题的解决方法在这里：https://github.com/vuejs/vue-cli/issues/979#issuecomment-373027130

在创建这个项目时，我选择了“PWA”选项，它以某种方式覆盖了任何库延迟加载。

我尝试删除包 (npm remove @vue/cli-plugin-pwa)，但如上一个链接所述，在创建时选择 PWA，项目将配置为使用预取。

因此，将其添加到我的 vue.config.js 文件可以解决问题：

chainWebpack: (config) => {
  config.plugins.delete('prefetch')
}

代码在这里：https://github.com/nriesco/vuex-router-webpack-test/blob/master/vue.config.js#L6-L8

【讨论】：