Динамический импорт разделяет код, но не загружает ленивую загрузку

Я хочу ввести ленивую загрузку в Vue Router, чтобы некоторые части кода загружались только по запросу.

Я следую официальной документации по отложенной загрузке в Vue Router: https://router.vuejs.org/en/advanced/lazy-loading.html

Итак, для теста я изменил способ импорта модуля Vault в файл моего маршрутизатора:

import Vue from 'vue';
import Router from 'vue-router';

// Containers
import Full from '@/containers/Full';

// Views
// TODO: views should be imported dynamically
import Dashboard from '@/views/Dashboard';
const Vault = () => import('@/views/Vault');
import Page404 from '@/views/Page404';
import Page500 from '@/views/Page500';
import Login from '@/views/Login';

Vue.use(Router);

export default new Router({
    routes:         [
        {
            path:      '/',
            redirect:  '/dashboard',
            name:      'VENE',
            component: Full,
            children:  [
                {
                    path:      'dashboard',
                    name:      'dashboard',
                    component: Dashboard
                },
                {
                    path:      'vault',
                    name:      'vault',
                    component: Vault
                },
            ],
        },
        {
            path:      '/login',
            name:      'Login',
            component: Login,
        },
        {
            path:      '/404',
            name:      'Page404',
            component: Page404,
        },
        {
            path:      '/500',
            name:      'Page500',
            component: Page500,
        },
    ],
});

Все в порядке, однако, когда я впервые открываю приложение, извлеченный пакет, который должен был загружаться лениво, загружается заранее:

введите здесь описание изображения

Когда я перехожу к этому представлению с помощью маршрутизатора, оно снова появляется на вкладке Dev Tools Network, но говорит, что загружено с диска, поэтому пакет явно загружается при загрузке первой страницы, что полностью противоречит идее ленивой загрузки .


webpack javascript vue.js vue-router webpack-3
person van_folmert    schedule 29.11.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это происходит по двум причинам. Я должен сказать, вы правильно настроили все для отложенной загрузки компонента Vault. Один совет, я счел полезным добавить имя блока webpack в динамический импорт:

const Vault = () => import(/* webpackChunkName: "vault" */ '@/views/Vault')

Затем это будет отображаться на вкладке вашей сети с именем chunkName "vault".

Во-первых, я предполагаю, что вы используете @ vue-cli, глядя на свою файловую структуру и псевдоним / src. В зависимости от параметров, которые вы выбираете при создании проекта, @ vue-cli использует конфигурацию веб-пакета для прогрессивных веб-приложений, которые выполняет предварительную выборку всех ресурсов. Хотя в браузере есть механизмы для приоритезации этих загрузок, я обнаружил, что некоторые из предварительных выборок блокируют другие ресурсы. Преимущество предварительной выборки заключается в том, что браузеры не поддерживают сервис-воркеров, вы используете время простоя браузера, чтобы поместить ресурсы в кеш браузера, которые пользователь, вероятно, в конечном итоге будет использовать. Когда пользователю действительно нужен этот ресурс, он уже кэширован и готов к работе.

Во-вторых, у вас есть возможность отключить плагин предварительной выборки. @ vue-cli предоставляет escape-штриховки для отмены конфигурации по умолчанию. Просто отредактируйте или добавьте vue.config.js в корень вашего проекта.

courtesy @LinusBorg 

// vue.config.js
chainWebpack: (config) => {

  // A, remove the plugin
  config.plugins.delete('prefetch')

  // or:
  // B. Alter settings:
  config.plugin('prefetch').tap(options => {
    options.fileBlackList.push([/myasyncRoute(.)+?\.js$/])
    return options
  })
}

- Обязательно используйте либо вариант A , либо вариант B; не оба. -

Источник: https://github.com/vuejs/vue-cli/issues/979 < / а>

Я успешно использовал вариант А, но вам определенно следует самостоятельно сравнить результаты и выбрать вариант, который лучше всего подходит для ваших пользователей и приложения.

Я ценю возможность настройки @ vue-cli для эти и многие другие сценарии. Определенно стоит изучить возможность написания нужного вам приложения, а не принуждать ваше приложение к конфигурации.

person Steve Gardner    schedule 24.04.2018
comment
Обновление: иногда options.fileBlackList не существует (т.е. возвращает undefined): вместо этого вы можете использовать этот исправленный код;) github.com/vuejs/vue-cli/issues/2767#issuecomment-430745142 - person Terry; 28.01.2019