webpack 中的 hash 优化

配置文件

配置文件如下：

// nodejs 内置模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 为了更好的体现 chunkhash 与 contenthash，所以使用到了 css
const MiniCssExtractPlugin  =  require("mini-css-extract-plugin")
const webpack = require('webpack')

const moduleConfig = {
  rules: [
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
      ]
    },
  ]
}

function f2() {
  return webpack([
    // fullhash
    // 所有构建产物均使用相同的 hash。这意味着修改任何一个文件，所有文件的 hash 值都将会被改变
    {
      entry: './src/main.js',
      mode: 'none',
      module: moduleConfig,
      output: {
        filename: '[name].[fullhash].js',
        path: path.resolve(__dirname, 'dist/fullhash'),
        clean: true
      },
      plugins: [
        new MiniCssExtractPlugin({
            // css 单独输出成文件
            filename: '[name].[fullhash].css'
        })
      ]
    },
    // chunkhash
    // 同一 chunk 下的文件使用相同的 hash。修改在同一个 chunk 中的文件，同属该 chunk 的所有文件 hash 值都会改变
    {
      entry: './src/main.js',
      mode: 'none',
      module: moduleConfig,
      output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist/chunkhash'),
        clean: true
      },
      plugins: [
        new MiniCssExtractPlugin({
            // css 单独输出成文件
            filename: '[name].[chunkhash].css'
        })
      ]
    },
    // contenthash
    // 不同的文件使用不同的 hash。每个文件都会根据自己的文件内容生成 hash 值，互不干扰。
    {
      entry: './src/main.js',
      mode: 'none',
      module: moduleConfig,
      output: {
        filename: '[name].[contenthash].js',
        // chunkFilename: '[name].[contenthash].chunk.js',
        path: path.resolve(__dirname, 'dist/contenthash'),
        clean: true
      },
      plugins: [
        new MiniCssExtractPlugin({
            // css 单独输出成文件
            filename: '[name].[contenthash].css'
        })
      ],
      optimization: {
        runtimeChunk: true
      }
    },
  ])
}


f2().run(() => {
  console.log('✅')
})

配置缓存后，后面用户再次访问该网站，如果命中缓存，将大幅度提高加载速度。

在 webpack 中有三种 hash 生成方式分别是：fullhash、chunkhash、contenthash。

• fullhash：所有构建产物均使用相同的 hash。这意味着修改任何一个文件，所有文件的 hash 值都将会被改变
• chunkhash：同一 chunk 下的文件使用相同的 hash。修改在同一个 chunk 中的文件，同属该 chunk 的所有文件 hash 值都会改变
• contenthash：不同的文件使用不同的 hash。每个文件都会根据自己的文件内容生成 hash 值，互不干扰

moduleId/chunkId 的变化导致 hash 变化

moduleId/chunkId 的变化也会导致 hash 变化。比如一个模块引入了另一个模块，这两个模块的 id 可能就会变化，继而引发后面模块的 id 发生变化。

runtimeChunk

进行如下配置，将 webpack 运行代码分割到外部去，这样每个模块改变，也不会影响其它的模块 id。

optimization: {
  runtimeChunk: true
}