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

Question

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

1

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

Я следую официальной документации для Lazy Loading в 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,
        },
    ],
});

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

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

van_folmert 29 нояб. 2017, в 10:54

Источник

Теги:

javascript

vue.js

vue-router

webpack

webpack-3

1 ответ

Ещё вопросы

Steve Gardner · Answer 1 · 2018-04-24T13-11-00.000Z

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

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

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

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

Во-вторых, у вас есть варианты отключения плагина prefetch. @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

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

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

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