Vue延迟加载/异步组件在初始加载时加载

Question

我正在尝试让延迟加载/异步.js块在Vue应用程序中工作。

我创建了vue项目

vue create project

现在在路由器和视图中，我想使用语法加载组件

component: () => import('path/to/component')

拆分成块是可行的，我得到0.js，1.js等，当我单击需要组件或路由的适当链接时，它将加载该块。

问题是，当我最初加载第一页时，无论如何它都会加载所有块0.js .... 5.js等，当我单击需要2.js的链接时，它会再次下载它。

对于构建/服务，我使用默认的vue-cli

npm run serve

我尝试使用router.onReady（），但即使不需要组件，它仍会在初始/ login页面上加载所有块。

提前谢谢

Answer 1

好吧，所以在修改了一段时间后，我设法发现它是预取功能。

因此，在根项目目录中创建vue.config.js并键入

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

让它正常工作。由于每个组件大约为50kB，因此可以节省带宽。