本文大约 1500 字。
目录
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 打包后的资源按大小分有三类,从小到大排列:
这三类资源都可以生成 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 如何快速进行业务迭代?