CommonChunkPlugins

1. Vendor chunks
   • pull react out of main file

plugins: [ 
  new webpack.optimize.CommonsChunkPlugin({ 
    name: ['vendor'] 
  }) 
] 

2. The correct hash
   • [name].[chunkhash].js
3. Runtime issues
   • The runtime is the part of Webpack that resolves modules at runtime and handles async loading and more

plugins: [ 
  new webpack.optimize.CommonsChunkPlugin({ 
    name: ['runtime'] 
  }) 
] 

4. Adding more dependencies
   • Every chunk gets a numerical chunk id

plugins: [ 
  // new webpack.NamedChunksPlugin(),
  new webpack.NamedModulesPlugin(), 
  // new webpack.HashedModuleIdsPlugin(),
] 

5. Love me some async
   • To prevent loading all the code at once we break it up using some async split points
   • NamedChunkPlugin only handles chunks that have a name

plugins: [ 
  // ... 
  new webpack.NamedChunksPlugin((chunk) => { 
    if (chunk.name) { 
      return chunk.name; 
    } 
    return chunk.modules.map(m => path.relative(m.context, m.request)).join("_"); 
  }), 
]

6. Legacy before it was hipster — external dependencies
   • NamedModulesPlugin also only works for normal modules. That being said, the external module stole the id 0 from the multi preact module
7. Adding more entry points
   • our vendor chunk does not only take what we specify but also everything we use in both of our entry-points
   • Adding minChunks: Infinity to our vendor commons chunk tells Webpack we really only want what we specified in the entry
8. …

Predictable long term caching with Webpack – web pack – Medium

Guides - Explain Hash Changes in Caching Guide · Issue #652 · webpack/webpack.js.org · GitHub