我使用Vue-CLI 3并告诉它我想使用vue-router . 它在创建的routes.js中生成此类型的Webpack import语句 .
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
我开始创建四个视图 . 一些视图调用组件内部 .
Home.vue (Home page and default route at '/')
About.vue
Contact.vue
Photos.vue
我在routes.js中异步制作了About，Contact和Photos
import Home from './views/Home.vue';
/* name = named routes */
export const routes = [
{
path: '/',
component: Home,
name: 'home'
},
{
path: '/photo/:id',
// component: Photo,
component: () => import(/* webpackChunkName: "Photo" */ './views/Photo.vue'),
name: 'photo'
},
{
path: '/about',
component: () => import(/* webpackChunkName: "About" */ './views/About.vue'),
// component: About,
name: 'about'
},
{
path: '/contact',
// component: Contact,
component: () => import(/* webpackChunkName: "Contact" */ './views/Contact.vue'),
name: 'contact'
},
{
/* Wildcard path to catch all other paths */
path: '*',
redirect: '/'
}
];
当我进行构建时，Vue CLI会创建额外的JS和CSS块（关于 . [hash] .js等） . 但是，当我加载Home路由时，这些其他块根据Chrome的devtools加载，但响应选项卡中也没有任何内容 . 然后，当我访问About，Contact或Photo路由时，浏览器会加载这些块，但现在响应选项卡中有一些内容 .
异步是否按预期工作？
谢谢 .
1 回答
我想我可能已经知道我的Home路线上的这些额外呼叫是什么 . Webpack有一个配置，可以打开预取 . 我猜Vue CLI或Webpack的默认设置是打开预取 .
https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules
https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
Vue论坛上有人向我指出了Vue-CLI文档：https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch