Vue 2 / Vue CLI 3: Создание асинхронных отдельных файловых компонентов - PullRequest
Новая
       34

Vue 2 / Vue CLI 3: Создание асинхронных отдельных файловых компонентов

0 голосов
/ 08 сентября 2018

Я использовал Vue-CLI 3 и сказал, что хочу использовать vue-router. Он генерирует этот тип оператора импорта Webpack в созданных маршрутах. Js. 

// 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

Я сделал «О», «Контакты» и «Фотографии» асинхронными в маршрутах .js 

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, эти другие чанки загружаются в соответствии с devtools в Chrome, но на вкладке ответа также ничего нет. Затем, когда я захожу на страницу «О маршрутах», «Контакты» или «Фото», браузер загружает эти чанки, но теперь на вкладке ответа теперь есть что-то.

Асинхронная работа работает как задумано?

Спасибо.

1 Ответ

0 голосов
/ 12 сентября 2018

Я думаю, что мог бы выяснить, что это за дополнительные звонки на моем маршруте 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

...