title: Vue index.html contains <link> tags to several lazy-loaded components
body: <p>I'm trying to improve the load time of my website, and towards that, I'm using the following settings in my <code>vue.config.js</code>:</p>
  
  <pre><code>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('@', '')}`
          }
        }
      }
    })
  </code></pre>
  
  <p>Additionally, I also load all my routes dynamically:<br>
  <strong>router.js</strong></p>
  
  <pre><code>const LandingPage = () =&gt; import(/* webpackChunkName: "view-landing-page" */ '@C/landing-page')
  const HomePage = () =&gt; import(/* webpackChunkName: "view-home-page" */ '@C/home-page')
  const Room = () =&gt; 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
      }
    ]
  })
  </code></pre>
  
  <p>Each of these views <em>also</em> use lazy-loaded components. For example:<br>
  <strong>room.vue</strong></p>
  
  <pre><code>export default {
    name: 'room',
    mixins: [SocketEventsMixin],
    components: {
      'video-element': () =&gt; import(/* webpackChunkName: "video-element" */ '@RC/media/video-element'),
      'video-chat': () =&gt; import(/* webpackChunkName: "video-chat" */ '@RC/communications/video-chat'),
    }
  }
  </code></pre>
  
  <p>However, even with all this, I see the following in my <code>index.html</code>:</p>
  
  <pre><code>...
  &lt;link href=/css/view-room.1ce954c7.css rel=prefetch&gt;
  &lt;link href=/js/view-room.fe2de329.js rel=prefetch&gt;
  ...
  &lt;link href=/css/video-element.8342e42f.css rel=prefetch&gt;
  &lt;link href=/js/video-element.ab0e6cca.js rel=prefetch&gt;
  ...
  </code></pre>
  
  <p>As a result, a whopping 4.5MB is downloaded on visiting the landing page, which does not require <em>any</em> of these assets.</p>
  
  <p>How do I ensure that <code>index.html</code> only contains the bare-minimum scripts/CSS, and have everything else be loaded dynamically? What causes an asset to be included in <code>index.html</code> as opposed to being dynamically loaded? What am I doing wrong?</p>