Before we finish this section on code splitting, we will go over caching. Caching is related to the previous processes and is no doubt something that will come up during programming. For the uninitiated, caching is the method of storing previously computed data to allow it to be served faster. It also relates to the following section on prefetching and preloading, methods that govern how memory is used.

Learning about caching will ensure you know how to split code more effectively. In the following example, we will see how it's done. In Webpack, caching is done by something called filename hashing (when a computer traces the location of a file recursively) and, specifically, the hashing of the output bundle:

 module.exports = {
   entry: './src/index.js',
   plugins: [
    // new CleanWebpackPlugin(['dist/*']) for < v2 versions 
       of CleanWebpackPlugin
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Output Management',
      title: 'Caching',
   }),
 ],
 output: {
  filename: 'bundle.js',
  filename: '[name].[contenthash].js',
  path: path.resolve(__dirname, 'dist'),
  },
};

Note the output key handler in the preceding code block; within the parentheses, you will see the output  bundle.js filename and below that is the inline element we refer to as the hash. You should substitute the bracketed terms with your preferences. This method produces an alternative output that is only updated when the content updates and serves as our cache resource.

Every filesystem access is cached so that multiple parallel or serial requests to the same file occur faster. In watch mode, only modified files are evicted from the cache. If watch mode is turned off, then the cache is purged before every compilation.

This leads us to our next section, which also relates to imports—prefetching and preloading.