vue 开发常用工具及配置五：hash 与缓存控制

本文大约 1500 字。

hash
三种 hash
在 vue.config.js 中配置 hash
源码

hash

以前使用 JQuery 开发前端页面的时候，页面中引用的资源文件如js、css等，一般尾部加一个 t=[时间戳] 参数，用于防止修改不生效。现在工程化开发，使用 Webpack 编译，打包的资源文件路径里自动带有一串随机字符串，称为 hash：

       
       
       <link href=/static/css/chunk-vendors.d637be65.css rel=preload as=style>

“d637be65”即是hash。每次 build 都会生成不同的 hash，所以每次编译部署，都不会有缓存问题。

这个 hash 是如何生成的？它的生成机制是什么？

三种 hash

Webpack 打包后的资源按大小分有三类，从小到大排列：

module，即模块，每个引入的文件就是一个module，常言模块化，是开发中的物理最小代码单位
chunk， N 个模块打包在一起形成的的一个文件（如果 chunk 有 split，则每个分开的文件都是一个独立的 chunk）
bundle，一次工程编译打包的最终产物，有可能就是 chunk，也有可能包含多个chunk的综合体

这三类资源都可以生成 hash，粒度从低到高依次为：

hash，根据每次编译的内容计算所得，不是针对每个具体文件的，每次编译都会有一个 hash
chunkhash，入口级别的 hash，如果入口文件有改动，则从该入口打包引入的所有文件的hash都会变化，主要指同一个入口的js和css文件。
contenthash，文件级别的 hash，只有文件的内容变了hash才会变

在 vue 项目中，启用的是哪一类 hash？

在 vue.config.js 中配置 hash

在vue.config.js配置文件中，与输出文件名有关的主要配置有：

       
       
         outputDir: 'dist',
        
        
          assetsDir: 'static',
        
        
          filenameHashing:true,
        
        
          pages: {
        
        
            index: {
        
        
              // page 的入口
        
        
              entry: 'src/main.js',
        
        
              // 模板来源
        
        
              template: 'public/index.html',
        
        
              // 在 dist/index.html 的输出
        
        
              filename: 'index.html',
        
        
              // 当使用 title 选项时，
        
        
              // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        
        
              title: 'Index Page',
        
        
              hash: true,
        
        
              // 在这个页面中包含的块，默认情况下会包含
        
        
              // 提取出来的通用 chunk 和 vendor chunk。
        
        
              chunks: ['chunk-vendors', 'chunk-common', 'index']
        
        
            }
        
        
          },

这里的 pages.*.chunks 有什么含义？

这部分配置，其实会编译到webpack中的html-webpack-plugin的配置里。所以vue.config.js中的pages.chunks也就等同于html-webpack-plugin中的chunks。

再看一下 html-webpack-plugin 的 chunks，有什么含义。

chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。例如这个html-webpack-plugin配置：

       
       
       entry: {
        
        
            index: path.resolve(__dirname, './src/index.js'),
        
        
            index1: path.resolve(__dirname, './src/index1.js'),
        
        
            index2: path.resolve(__dirname, './src/index2.js')
        
        
        }
        
        
        ...
        
        
        plugins: [
        
        
            new HtmlWebpackPlugin({
        
        
                ...
        
        
                chunks: ['index','index2']
        
        
            })
        
        
        ]