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

• 2020 年 1 月 14 日
• 筆記

本文大约 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']      })  ]

注意，而如果没有显式指定 chunks 选项，默认会全部引用。

通过编译发现，如果不修改图片或源码，生成的 hash 是不会变化的。如果修改了 vue 组件，部分文件的 hash，例如 css、js文件的，会变化，但不想干的图片不会变化。

所以，回到前面的问题，在 vue 项目中，启用的是哪一类 hash？答案当是 contenthash。

源码

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20200101

参考链接

https://segmentfault.com/q/1010000016925412/a-1020000016946034

关于Vue-cli3.0 的配置pages.chunks的参数的意义

https://segmentfault.com/a/1190000007294861#articleHeader9

html-webpack-plugin用法全解

[专栏]基于 vue+go 如何快速进行业务迭代？