深刻浅出的webpack4构建工具---浏览器前端资源缓存(十一)

阅读目录

一. 理解使用hash

二：理解使用chunkhash

三：对第三方库打包后使用缓存

四：contenthash

回到顶部

一. 理解使用hash

   通常状况下，对于前端静态资源，浏览器访问的时候但愿资源都可以进行缓存，当第二次及之后进入页面的时候，页面就能够直接使用缓存资源，这样的话，页面打开速度很快，提升了用户体验同时也节省了带宽资源。而其中最为常见的一种最大化利用缓存的形式就是为静态资源加上hash, 使用一个不会重复的标识符来达到资源能够永久缓存的目的。

浏览器缓存方法有不少种，那么下面咱们分别使用hash, chunkhash和contenthash来理解下。

在理解hash, chunkhash和contenthash以前，咱们首先看看咱们项目的基本架构以下：

### 目录结构以下：
demo1                                       # 工程名
|   |--- dist                               # 打包后生成的目录文件             
|   |--- node_modules                       # 全部的依赖包
|   |--- js                                 # 存放全部js文件
|   | |-- demo1.js  
|   | |-- main.js                           # js入口文件
|   |--- webpack.config.js                  # webpack配置文件
|   |--- webpack.dll.config.js              # 打包第三方依赖的库文件
|   |--- index.html                         # html文件
|   |--- styles                             # 存放全部的css样式文件   
|   | |-- main.styl                         # main.styl文件   
|   | |-- index.styl                        
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel转码文件

1. 理解使用hash
hash的默认长度为20个字符，可使用[hash:8]这样的方式来配置，表明hash使用8个字符来表示。

webpack.config.js 配置代码以下(入口文件分别为main和demo1)：

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[hash].js',
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, 'dist')
  }
}

在dist目录打包成以下：

如上能够看到，main.js中hash编码和demo1.js中的hash编码是如出一辙的。如今我改下main.js代码后，继续打包一下能够看到以下信息：

能够看到，demo1.js代码其实我并无改动，可是它由于main.js代码改动了致使他的hash编码也改变了。

hash理解为：当每次修改任何一个文件后，全部文件打包后的hash值都是同样的，因此假如只是修改了任何一个文件，整个项目的文件缓存都将失效。

hash为何会这样呢？要理解这个问题，首先咱们须要理解 the module identifier。webpack默认会为各个模块分配一个id做为标识，用来处理模块之间的依赖关系，可是默认的id命名规则则是根据模块引入的顺序，赋予一个整数 (1,2,3..). 因为该hash是基于整个 module identifier序列计算获得的，所以js打包的时候使用该hash，全部的值都同样的，可是任意删除或者修改任何一个文件的时候，都会对整个id序列形成影响，从而改变hash的值。

回到顶部

二：理解使用chunkhash

上面的hash有这个缺点，所以chunkhash出现了，它就是解决这个问题而出现的。咱们接下来再把配置改为以下：

module.exports = {
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, 'dist')
  }
};

咱们继续运行打包完后，变成以下：

能够看到这时候main.js和demo1.js中的hash编码不同了，所以接下来咱们继续随便修改下main.js代码，继续打包以下：

如上能够看到，咱们只是改变了下 main.js代码，demo1.js代码并无改变，所以main.js代码的hash编码值改变了，demo1.js的hash值编码并无改变，所以当某个文件改变的时候，只会从新请求该文件，未改变的文件不会从新请求，会缓存里面读取。

回到顶部

三：对第三方库打包后使用缓存

经过上面使用chunkhash, 所以对于一些经常使用的库，第三方文件咱们也可使用chunkhash这么作，这样一来的话，第三方库文件在浏览器中会加载很快，所以对于第三方库文件我打算输出到 项目中另外一个文件内，好比叫plugins文件夹内，好比以下webpack.dll.config.js 代码以下：

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  // 入口文件
  entry: {
    // 项目中用到该两个依赖库文件
    jquery: ['jquery'],
    echarts: ['echarts']
  },
  // 输出文件
  output: {
    // 文件名称
    filename: '[name].dll.[chunkhash].js', 
    // 将输出的文件放到dist目录下
    path: path.resolve(__dirname, './plugins'),

    /*
     存放相关的dll文件的全局变量名称，好比对于jquery来讲的话就是 _dll_jquery, 在前面加 _dll
     是为了防止全局变量冲突。
    */
    library: '_dll_[name]'
  },
  mode: 'development',
  plugins: [
    // 使用插件 DllPlugin
    new DllPlugin({
      /*
       该插件的name属性值须要和 output.library保存一致，该字段值，也就是输出的 manifest.json文件中name字段的值。
       好比在jquery.manifest文件中有 name: '_dll_jquery'
      */
      name: '_dll_[name]',

      /* 生成manifest文件输出的位置和文件名称 */
      path: path.join(__dirname, './plugins', '[name].manifest.json')
    })
  ]
};

webpack.config.js 代码以下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 清除dist目录下的文件
const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

// 引入HappyPack插件 
const HappyPack = require('happypack');

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 使用正则去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: ['happypack/loader?id=css-pack']
        })
      },
      {
        test: /\.(png|jpg)$/,
        /*
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
        */
        use: ['happypack/loader?id=image']
      },
      {
        test: /\.js$/,
        // 将对.js文件的处理转交给id为babel的HappyPack的实列
        use: ['happypack/loader?id=babel'],
        // loader: 'babel-loader',
        exclude: path.resolve(__dirname, 'node_modules') // 排除文件
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.json']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ClearWebpackPlugin(['dist']),
    new ExtractTextPlugin({
      // 从js文件中提取出来的 .css文件的名称
      filename: `main.[chunkhash].css`
    }),
    // 告诉webpack使用了哪些第三方库代码
    new DllReferencePlugin({
      context: path.join(__dirname),
      // jquery 映射到json文件上去
      manifest: require('./plugins/jquery.manifest.json')
    }),
    new DllReferencePlugin({
      context: path.join(__dirname),
      // echarts 映射到json文件上去
      manifest: require('./plugins/echarts.manifest.json')
    }),

    /****   使用HappyPack实例化    *****/
    new HappyPack({
      // 用惟一的标识符id来表明当前的HappyPack 处理一类特定的文件
      id: 'babel',
      // 如何处理.js文件，用法和Loader配置是同样的
      loaders: ['babel-loader']
    }),
    new HappyPack({
      id: 'image',
      loaders: [{
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      }]
    }),
    // 处理styl文件
    new HappyPack({
      id: 'css-pack',
      loaders: ['css-loader']
    })
  ]
};

打包后变成以下：

第三方库文件通常状况下不会轻易更改，所以咱们在页面上引用的时候，直接把hash编码值带上，当第二次浏览器访问的时候，第三方库文件会直接从缓存里面读取(除js缓存时间过时之外)，这样的话，浏览器加载速度会更快。

回到顶部

四：contenthash

如上，第三方库文件已经解决了使用缓存了，可是css文件并无，好比在main.js代码内部应用了 main.styl， main.js代码以下：

require('../styles/main.styl');

$('#app').html('欢迎你来个人博客');

console.log('这是main.js');
console.log(22333);   
require('./demo1.js');

以下图所示：

main.js 和 main.css 的hash编码是同样，所以我如今继续更改main.js, 随便加一行代码，而后继续打包，会看到main.css的hash编码也会跟着改变，其实main.css的文件并无更改，其实我是想main.css直接仍是使用缓存就好。
也就是说 更改那个文件，就对那个文件使用新的hash编码。没有更改过的文件，hash编码不变。

main.js 代码变为以下：

require('../styles/main.styl');

$('#app').html('欢迎你来个人博客');

console.log('这是main.js');
console.log(22333);   
require('./demo1.js');

// 新增一行代码
console.log(22333111); 

而后继续打包，以下图所示：

也能够看到main.css的hash编码是跟着 main.js 编码变更的。

其实根本缘由仍是 module identifier，由于 main.js 新引入的模块main.styl, 它改变了之后全部模块的 id 值，因此 main.css 文件中引入的模块值发生了改变，因而 main.styl 的 chunkhash 也随着发生改变。

为了解决这个问题，contenthash就出来了。

首先要分离css，以前是使用 extract-text-webpack-plugin 插件，如今咱们为了使用 contenthash，所以须要使用mini-css-extract-plugin插件就能够了。具体配置代码以下：

// 引入 mini-css-extract-plugin 插件 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    {
      // 使用正则去匹配
      test: /\.styl$/,
      /*
      use: ExtractTextPlugin.extract({
        fallback: {
          loader: 'style-loader'
        },
        use: [
          {
            loader: 'css-loader',
            options: {}
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-cssnext')(),
                require('cssnano')(),
                require('postcss-pxtorem')({
                  rootValue: 16,
                  unitPrecision: 5,
                  propWhiteList: []
                }),
                require('postcss-sprites')()
              ]
            }
          },
          {
            loader: 'stylus-loader',
            options: {}
          }
        ]
      })
      */
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {}
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              require('postcss-cssnext')(),
              require('cssnano')(),
              require('postcss-pxtorem')({
                rootValue: 16,
                unitPrecision: 5,
                propWhiteList: []
              }),
              require('postcss-sprites')()
            ]
          }
        },
        {
          loader: 'stylus-loader',
          options: {}
        }
      ]
    },
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'happypack/loader?id=css-pack'
      ]
      /*
      use: ExtractTextPlugin.extract({
        use: ['happypack/loader?id=css-pack']
      })
      */
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css'
    })
  ]
}

所以webpack.config.js 全部代码以下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 引入 mini-css-extract-plugin 插件 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 清除dist目录下的文件
const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

// 引入HappyPack插件 
const HappyPack = require('happypack');

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 使用正则去匹配
        test: /\.styl$/,
        /*
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
        */
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {}
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-cssnext')(),
                require('cssnano')(),
                require('postcss-pxtorem')({
                  rootValue: 16,
                  unitPrecision: 5,
                  propWhiteList: []
                }),
                require('postcss-sprites')()
              ]
            }
          },
          {
            loader: 'stylus-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'happypack/loader?id=css-pack'
        ]
        /*
        use: ExtractTextPlugin.extract({
          use: ['happypack/loader?id=css-pack']
        })
        */
      },
      {
        test: /\.(png|jpg)$/,
        /*
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
        */
        use: ['happypack/loader?id=image']
      },
      {
        test: /\.js$/,
        // 将对.js文件的处理转交给id为babel的HappyPack的实列
        use: ['happypack/loader?id=babel'],
        // loader: 'babel-loader',
        exclude: path.resolve(__dirname, 'node_modules') // 排除文件
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.json']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ClearWebpackPlugin(['dist']),
    /*
    new ExtractTextPlugin({
      // 从js文件中提取出来的 .css文件的名称
      filename: `[name].[contenthash:8].css`
    }),
    */
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css'
    }),
    // 告诉webpack使用了哪些第三方库代码
    new DllReferencePlugin({
      context: path.join(__dirname),
      // jquery 映射到json文件上去
      manifest: require('./plugins/jquery.manifest.json')
    }),
    new DllReferencePlugin({
      context: path.join(__dirname),
      // echarts 映射到json文件上去
      manifest: require('./plugins/echarts.manifest.json')
    }),

    /****   使用HappyPack实例化    *****/
    new HappyPack({
      // 用惟一的标识符id来表明当前的HappyPack 处理一类特定的文件
      id: 'babel',
      // 如何处理.js文件，用法和Loader配置是同样的
      loaders: ['babel-loader']
    }),
    new HappyPack({
      id: 'image',
      loaders: [{
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      }]
    }),
    // 处理styl文件
    new HappyPack({
      id: 'css-pack',
      loaders: ['css-loader']
    }),
    new webpack.HashedModuleIdsPlugin()
  ]
};

经过如上配置后，咱们再打包一下看下以下所示：

当我修改main.js代码后，再进行打包，会生成文件以下，以下图所示：

如今咱们继续改下main.styl代码，继续打包，看是否main.css的hash编码的变化，以下图所示

如上咱们能够看到修改main.styl后，main.js代码的hash变化也发生变化了。

所以在打包js中，咱们须要使用 contenthash 就能够了，配置文件以下：

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, 'dist')
  }
}

所以webpack.config.js全部代码以下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 引入 mini-css-extract-plugin 插件 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 清除dist目录下的文件
const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

// 引入HappyPack插件 
const HappyPack = require('happypack');

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js',
    demo1: './js/demo1.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 使用正则去匹配
        test: /\.styl$/,
        /*
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
        */
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {}
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-cssnext')(),
                require('cssnano')(),
                require('postcss-pxtorem')({
                  rootValue: 16,
                  unitPrecision: 5,
                  propWhiteList: []
                }),
                require('postcss-sprites')()
              ]
            }
          },
          {
            loader: 'stylus-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'happypack/loader?id=css-pack'
        ]
        /*
        use: ExtractTextPlugin.extract({
          use: ['happypack/loader?id=css-pack']
        })
        */
      },
      {
        test: /\.(png|jpg)$/,
        /*
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
        */
        use: ['happypack/loader?id=image']
      },
      {
        test: /\.js$/,
        // 将对.js文件的处理转交给id为babel的HappyPack的实列
        use: ['happypack/loader?id=babel'],
        // loader: 'babel-loader',
        exclude: path.resolve(__dirname, 'node_modules') // 排除文件
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.json']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ClearWebpackPlugin(['dist']),
    /*
    new ExtractTextPlugin({
      // 从js文件中提取出来的 .css文件的名称
      filename: `[name].[contenthash:8].css`
    }),
    */
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css'
    }),
    // 告诉webpack使用了哪些第三方库代码
    new DllReferencePlugin({
      context: path.join(__dirname),
      // jquery 映射到json文件上去
      manifest: require('./plugins/jquery.manifest.json')
    }),
    new DllReferencePlugin({
      context: path.join(__dirname),
      // echarts 映射到json文件上去
      manifest: require('./plugins/echarts.manifest.json')
    }),

    /****   使用HappyPack实例化    *****/
    new HappyPack({
      // 用惟一的标识符id来表明当前的HappyPack 处理一类特定的文件
      id: 'babel',
      // 如何处理.js文件，用法和Loader配置是同样的
      loaders: ['babel-loader']
    }),
    new HappyPack({
      id: 'image',
      loaders: [{
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      }]
    }),
    // 处理styl文件
    new HappyPack({
      id: 'css-pack',
      loaders: ['css-loader']
    }),
    // new webpack.HashedModuleIdsPlugin()
  ]
};

webpack.config.js 代码如上配置，首先咱们先打包完成后，查看打包后的文件以下：

当咱们随便改动下main.js文件，能够看到以下对应main.js的hash编码发生改动，以下代码文件：

 

接着咱们继续改动下main.styl文件中的代码，能够看到以下图demo1.js和main.js的hash编码并无改动，
只有main.css文件的hash编码发生改动了，以下图所示：

查看github上的代码