title: Cache misses for lazy loaded resources (using dynamic imports)
body: <p>In a Vue.js project created with Vue CLI (internally using webpack), I implement code splitting and lazy loading with dynamic imports like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>import(/* webpackChunkName: "my-feature" */ "./my-feature.js");
  </code></pre>
  
  <p>As a result I get the expected set of files:</p>
  
  <ol>
  <li>dist/myApp.umd.min.js</li>
  <li>dist/myApp.umd.min.vendors~my-feature.js (my-feature dependencies)</li>
  <li>dist/myApp.umd.min.my-feature.js</li>
  </ol>
  
  <p>The Vue application is built as a library and then used for an existing web site. What I do is include <code>myApp.umd.min.js</code> in &lt;head&gt; (common to all pages), and then in &lt;body&gt; request code I need for that page (for example <code>myApp.umd.min.my-feature.js</code>). Dependencies (<code>myApp.umd.min.vendors~my-feature.js</code>) are automatically requested by the earlier script.</p>
  
  <hr>
  
  <p><strong>Problem</strong></p>
  
  <p>When I navigate to a page, that uses the Vue app (and specifically my-feature), all 3 of the above files are loaded. That is expected for the first visit, but if I move to a different page and then return, only the first file (<code>myApp.umd.min.js</code>) is loaded from cache. The other ones are loaded from server every time I visit the page.</p>
  
  <p>What approach to take for the lazy-loaded scripts to come from cache once already loaded? Thank you!</p>