Mix long term caching and code splitting in webpack 2

Question

I'm writing a javascript webapp using webpack 2 as module bundler.

What I need is a way to mix long term caching feature ( https://webpack.js.org/guides/caching/ ) and code splitting ( https://webpack.js.org/guides/code-splitting/ ).

I'm able to lazy load a vendor library (pixi.js in my case) using require.ensure but this cause a bundle creation including the lib. I'm also able to create cachable bundles, but I would like to create a bundle for long term caching and use it in lazy loaded part.

Is it possible?

Edit 1

I add some parts of my config for a better explanation.

entry: {
  vendor: ['some', 'vendors', 'libs'],
  pixi: ['pixi.js'],
  main: ['babel-polyfill', './app/index.js'],
},
output: {
  [... other configuration]
  filename: '[name].[chunkhash].bundle.js',
  chunkFilename: '[name].[chunkhash].js'
},

I'm using the vendor bundle for external libraries needed at startup time, but the pixi.js is only needed in some cases, but I would like to be long term cached.

The bundling phase emit this 2 files (and many others):

pixi.8ef3aeac142f1bf921bf.bundle.js 6.9331d810904191781167.js

their content is almost the same. The second one is created by the require.ensure but I would like the pixi.8ef3aeac142f1bf921bf.bundle.js was used.

Answer 1

Using require.ensure produce a different code chunk that will be built in a different file. The kind of cache you want to offer is about the naming policy you give to those bundles (and your server configuration of course).

The parameter you are looking for is chunckFilename .

output: {
  chunkFilename: '[name].chunk.js',
}

If you set it like this you will always have predeterminated chuncks named 0.chunk.js , 1.chunk.js , etc..

Of course that can pose a problem for clients, so you would like to configure this parameter as follows:

output: {
  chunkFilename: '[name].[chunkhash].chunk.js',
}

Adding chunkhash to the name of your chunk will give you 0.4c473bca1d7688737499.chunk.js , 1.2cfbf4a9cc0e1f24ec2c.chunk.js , etc kind of chunk names.

The chunkhash is identical for each application build that doesn't change the chunck code. That means that if you never change your library, the chunkhash will never change, thus the user will never have to re-download that file again.

If you want to ensure the chunk to always have the same name , then you can specify the name on the require.ensure declaration:

require.ensure([], function(require){
  var pixi = require('pixi');
  // ...
}, "pixi"); // this will be passed webpack template under [name] and can be used with chunkFilename

I personally suggest the same approach for bundles naming:

output: {
  /**
   * Specifies the name of each output file on disk.
   * IMPORTANT: You must not specify an absolute path here!
   *
   * See: https://webpack.js.org/configuration/output/#output-filename
   */
  filename: '[name].[hash].bundle.js',

  /** The filename of non-entry chunks as relative path
   * inside the output.path directory.
   *
   * See: https://webpack.js.org/concepts/output/#output-chunkfilename
   */
  chunkFilename: '[name].[chunkhash].chunk.js',
}