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

Question

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

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

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

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

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

我不明白的是，如果这是一个 vuejs 问题，一个设计问题，一个 webpack 问题，或者甚至是其他问题，也许是依赖导致了这个问题，不知道去哪里看。

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

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

谢谢！

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

Answer 1

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

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

我尝试删除包 (npm remove @vue/cli-plugin-pwa)，但正如之前 link 中所述，通过在创建时选择 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

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

code splitting not working properly on vue-cli generated project

lazy-loading

dynamic-import

webpack

vue-cli