使用gulp打包增加hash值,解决浏览器缓存问题
前端项目部署后,用户必须强刷浏览器后才能看到最新的代码(和效果),这种体验不是很好,而有的用户根本不知道强刷浏览器这么一回事。其实最好的办法就是给js和css增加一个版本号,或者说是一个hash值,看了下使用vue-cli搭建的项目,最后打完包后,都会生成一个随机的hash值。其实就是为了避免缓存。这里使用gulp 的gulp-rev插件就可以给打包的js或者css增加一个hash值,注意...
·
前端项目部署后,用户必须强刷浏览器后才能看到最新的代码(和效果),这种体验不是很好,而有的用户根本不知道强刷浏览器这么一回事。
其实最好的办法就是给js和css增加一个版本号,或者说是一个hash值,看了下使用vue-cli搭建的项目,最后打完包后,都会生成一个随机的hash值。其实就是为了避免缓存。
这里使用gulp 的gulp-rev插件就可以给打包的js或者css增加一个hash值,注意,这里的hash值生成是随机的,这就意味着每个文件带着的hash值是不一样的。
如果希望文件携带的hash值是一样的话,就必须使用gulp-rename 重新命名。
使用完gulp-rev后,js文件名变了,css文件名也变了。在html引入的时候也需要发生变化才行,不然引入就有问题。
这里就要另外一个插件了gulp-rev-collector
gulp.task('js', function() {
return gulp.src('src/myjs/**/*.js')
.pipe(babel({
presets: ['env']
}))
.pipe(javascriptObfuscator())
.pipe(uglify())
// .pipe(rename({suffix:hashNum}))
.pipe(rev())
.pipe(gulp.dest('dist/myjs/'))
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('dist/rev'))
});
生成的一个json映射表,长这个样子
{
"attention/myAttention.js": "attention/myAttention-01d5fe6660.js",
"footer.js": "footer-ca5643ca7d.js",
"header.js": "header-cb5d6eb816.js",
}
其实就是生成一个映射表,然后按照这个映射表进行替换。
那如果我们用到了统一的hash值的话,在html页面上替换,就需要使用到gulp-replace进行替换了
给引入路径的.js 替换成 hash值+ ‘.js’就可以了
更多推荐
已为社区贡献11条内容
所有评论(0)