Vue 2 / Vue CLI 3：创建异步单文件组件答案

【问题标题】：Vue 2 / Vue CLI 3: Creating async single file componentsVue 2 / Vue CLI 3：创建异步单文件组件
【发布时间】：2019-02-13 16:09:59
【问题描述】：

我使用了 Vue-CLI 3 并告诉它我想使用 vue-router。它在创建的 routes.js 中生成这种类型的 Webpack 导入语句。

// 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 块（about.[hash].js 等）。但是，当我加载 Home 路由时，这些其他块是根据 Chrome 的 devtools 加载的，但响应选项卡中也没有任何内容。然后，当我访问 About、Contact 或 Photo 路由时，浏览器会加载这些块，但现在响应选项卡中有一些内容。

异步是否按预期工作？

谢谢。

【问题讨论】：

标签： vue.js webpack vue-router vue-cli-3

【解决方案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

【讨论】：