Vue index.html 包含 <link>标记到几个延迟加载的组件 [英] Vue index.html contains &lt;link&gt; tags to several lazy-loaded components

问题描述

我正在尝试缩短网站的加载时间，为此，我在 vue.config.js 中使用了以下设置:

I'm trying to improve the load time of my website, and towards that, I'm using the following settings in my 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

Additionally, I also load all my routes dynamically:
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
    }
  ]
})

这些视图中的每一个也使用延迟加载组件.例如:
room.vue

Each of these views also use lazy-loaded components. For example:
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 中看到以下内容:

However, even with all this, I see the following in my 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.5MB 的文件，而这不需要任何这些资产.

As a result, a whopping 4.5MB is downloaded on visiting the landing page, which does not require any of these assets.

我如何确保 index.html 只包含最低限度的脚本/CSS，并动态加载其他所有内容?是什么导致资产包含在 index.html 中而不是动态加载?我做错了什么?

How do I ensure that index.html only contains the bare-minimum scripts/CSS, and have everything else be loaded dynamically? What causes an asset to be included in index.html as opposed to being dynamically loaded? What am I doing wrong?

推荐答案

Vue-CLI 自动为所有延迟加载的组件设置 webpackPrefetch: true.我不知道您如何有条件地打开/关闭它，因此在我的项目中我将其完全关闭:

Vue-CLI automatically sets webpackPrefetch: true for all lazy-loaded components. I do not know how you can conditionally turn it on/off so in my projects I am turning it off completely:

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

这篇关于Vue index.html 包含 <link>标记到几个延迟加载的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！