title: vuejs code splitting and lighthouse performance
body: <p>I've a fairly big webapp with blog / sites and a webshop and I wrote my components that way that I always have a user and an admin component.</p>
  
  <p>For example the template of a text component looks like this</p>
  
  <pre><code>const admin-text = () =&gt; import(/* webpackChunkName: "admin" */ ./admin/text.vue)
  import user-text from './user.vue'
  
  admin-text(v-if="auth_isAdmin(user)")
  user-text(v-else)
  </code></pre>
  
  <p>The admin chunk is only marked as prefetch, and when opening the network panel in chrome I don't see the admin chunk downloaded, HOWEVER if I run lighthouse it seems to also download that chunk because I get only a 82 performance score and the warning to AVOID enormous network payloads and it list's a few chunks that I don't see on the network panel.</p>
  
  <p>Now I'm not sure if that approach to code splitting really works, or why is lighthouse also downloading those chunks marked as prefetch which shouldn't even be downloaded?</p>