Webpack学习笔记(八)：缓存

目的

缓存的目的在于浏览器端能够缓存下资源文件，而不用花时间去服务器获取资源，降低网络流量，提高访问速度。缓存的问题在于，如何确保资源文件更新后，浏览器能够拿到最新的文件而不是缓存的过期文件。
除了通过服务器端配置外，还可以通过webpack配置的方式解决这个问题。

修改输出文件名

webpack 提供了一种使用称为 substitution(可替换模板字符串) 的方式，通过带括号字符串来模板化文件名。其中，[contenthash] substitution 将根据资源内容创建出唯一 hash。当资源内容发生变化时，[contenthash] 也会发生变化。例如：
当请求的资源名称发生变化，自然浏览器就会去请求最新的资源而不是使用缓存了

  const path = require('path');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Caching'
      })
    ],
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist')
    }
  };

提取引导模板

上面的方法，在不修改文件内容的情况下重新打包，在一些webpack版本上可能会存在hash值不一样的情况。这是因为 webpack 在入口 chunk 中，包含了某些 boilerplate(引导模板)，特别是 runtime 和 manifest。可使用 optimization.runtimeChunk 选项将 runtime 代码拆分为一个单独的 chunk。将其设置为 single 来为所有 chunk 创建一个 runtime bundle。

  const path = require('path');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Caching'
    ],
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist')
    },
    optimization: {
      runtimeChunk: 'single'
    }
  };

参考链接

1. webpack缓存
2. 代码地址