Vue index. html содержит <link>тегов для нескольких компонентов с отложенной загрузкой - PullRequest
Новая
       5

Vue index. html содержит <link>тегов для нескольких компонентов с отложенной загрузкой

0 голосов
/ 16 июня 2020

Я пытаюсь улучшить время загрузки своего веб-сайта, и для этого я использую следующие настройки в моем vue.config.js: 

config.output.chunkFilename(`js/[name].[chunkhash:8].js`)

config.optimization
  .runtimeChunk('single')
  .splitChunks({
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name (module) {
        // get the name. E.g. node_modules/packageName/not/this/part.js
        // or node_modules/packageName
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]

          // npm package names are URL-safe, but some servers don't like @ symbols
          return `npm.${packageName.replace('@', '')}`
        }
      }
    }
  })

Кроме того, я также загружаю все свои маршруты динамически:
router. js

const LandingPage = () => import(/* webpackChunkName: "view-landing-page" */ '@C/landing-page')
const HomePage = () => import(/* webpackChunkName: "view-home-page" */ '@C/home-page')
const Room = () => import(/* webpackChunkName: "view-room" */ '@C/room')

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'landingPage',
      component: LandingPage
    },
    {
      path: '/land',
      name: 'landingPage',
      component: LandingPage
    },
    {
      path: '/home',
      name: 'homePage',
      component: HomePage
    },
    {
      path: '/*',
      name: 'roomPage',
      component: Room
    }
  ]
})

Каждое из этих представлений также использует компоненты с отложенной загрузкой. Например:
номер. vue

export default {
  name: 'room',
  mixins: [SocketEventsMixin],
  components: {
    'video-element': () => import(/* webpackChunkName: "video-element" */ '@RC/media/video-element'),
    'video-chat': () => import(/* webpackChunkName: "video-chat" */ '@RC/communications/video-chat'),
  }
}

Однако даже при всем этом я вижу в своем index.html следующее: 

...
<link href=/css/view-room.1ce954c7.css rel=prefetch>
<link href=/js/view-room.fe2de329.js rel=prefetch>
...
<link href=/css/video-element.8342e42f.css rel=prefetch>
<link href=/js/video-element.ab0e6cca.js rel=prefetch>
...

В результате при посещении целевой страницы загружается колоссальные 4,5 МБ, для чего не требуется любых этих ресурсов.

Как убедиться, что index.html содержит только минимальные скрипты / CSS, а все остальное загружается динамически? Что заставляет актив быть включен в index.html, а не динамически загружаться? Что я делаю не так?

1 Ответ

0 голосов
/ 16 июня 2020

Vue -CLI автоматически устанавливает webpackPrefetch: true для всех компонентов с отложенной загрузкой. Я не знаю, как его можно условно включить / выключить, поэтому в своих проектах я его полностью выключаю: 

// vue.config.js
  chainWebpack: config =>
  {
    config.plugins.delete('prefetch'); // for async routes
    config.plugins.delete('preload'); // for CSS
  }
...