title: How to build an webpack app which is fully, transparently, lazily, progressively loaded?
body: <h1>Goals</h1>
  
  <p>To build an app which</p>
  
  <ul>
  <li>is lazily progressively loaded. Only current page(and the pages which need to be preloaded) and it's dependancies (in app or node_modules) are loaded.</li>
  <li>minimizes common chunks. If pageA and pageB depend on same module C, then module C should be only included and load once.</li>
  <li>is friendly to http cache. Changes in some module or page should never invalidate other modules' cache.</li>
  <li>achieve all above in a transparent way. App should be written in the same way as it was bundled into one bundle. I believe the import/export manner in an normal app already provide enough information to do this, except for the lazy load cut points of pages, which can be encapsulated into a thin layer.</li>
  <li>(small fragments is not a problem for me since we expect http 2 to handle them)</li>
  </ul>
  
  <h1>Tries</h1>
  
  <h2>Splitting and Lazily Load Pages</h2>
  
  <p>Following the <a href="https://reacttraining.com/react-router/web/guides/code-splitting" rel="nofollow noreferrer">React-Router</a> way, we can splitting pages and load them lazily on demand. The problem is, if we don't make it further, pages will contain a lot of duplicate common chunks.</p>
  
  <h2>Load All Modules on Demand</h2>
  
  <p>See this <a href="https://github.com/zhaoyao91/docit/tree/show-lazy-app" rel="nofollow noreferrer">repo</a>. I made some tools and load <em>all</em> modules on demand. The problem is, it is intrusive and not transparent.</p>
  
  <h1>Needed</h1>
  
  <p>Solutions or ideas to achieve the goals above.</p>