vue а webpack не выполняет ленивую загрузку компонентов?

Question

Ленивый компонент в vue / webpack кажется неправильным, или я скучаю по путанице в терминах.

Чтобы выполнить отложенную загрузку компонента, я использую ключевое слово import, и webpack должен разделить этот компонент, чтобы отделить пакет , и когда мне нужно загрузить этот компонент, веб-пакет должен позаботиться об этом и загрузить компонент.

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

Например, я просто создаю простое приложение vue (используя cli) и просматриваю localhost:8080/, и страница about должна быть загружена (по умолчанию) с использованием ключевого слова import.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 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')
  }
]

Итак, это по замыслу? Я каждый раз загружаю файл, который мне сейчас не нужен (страница о). и если у меня есть 200 страниц, когда я получу 200 файлов, мне не нужно. как это заканчивается? что я сохранил здесь, используя ключ import?

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

Answer 1

Вы также можете избежать предварительной выборки компонентов, используя один из комментариев «magi c» (https://webpack.js.org/guides/code-splitting/#prefetchingpreloading -модулей ), например,

components: {
  MyComponent: () => import(/* webpackPrefetch: false */ './MyComponent.vue')
}

Не стесняйтесь читать Подробнее об этой оптимизации Vue:

https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/

Answer 2

попробуйте использовать vue -lazyload возможно, это может помочь, а для <script> тегов вы можете попробовать async defer, это поможет в оптимизации скорости сайта

Answer 3

Если вы ссылаетесь на шаблон приложения по умолчанию из Vue CLI, то вы фактически наблюдаете предварительную выборку страницы About, предназначенную для сокращения времени загрузки страниц, которые пользователь, вероятно, посетит. .

Если вы хотите избежать оптимизации производительности, используйте эту конфигурацию Vue:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')
  }
}

---

Для справки по устранению неполадок сетевая панель Chrome включает Инициатор столбец , который предоставляет интерактивную ссылку на исходный файл, который инициировал сетевой вызов. В этом случае about.js исходный файл выглядит следующим образом: