浏览器会默认缓存网站的静态资源文件,如:js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰,最常见的问题就是不能及时更新静态资源,造成新版本发布时用户无法及时看到新版本的变化,严重影响了用户体验。上述问题,最简单的办法就是在资源的请求路径上添加版本号,格式如下:
url?v=1.0.0
每次在更改资源的时候,手动修改版本号,但是每次手动改那么多后缀有些费事,现在有很多的工具可以让我们更轻松的完成这项工具。本文将探讨使用目前最流行的前端构建工具 Gulp 和 webpack 自动化为静态资源添加版本号防缓存处理。
Gulp 是一个简单易用的前端自动化构建工具,非常适合于构建多页面的工作流程。
安装 Gulp(这里使用的是 Gulp 4+ 版本):
$ npm install --save-dev gulp
安装 gulp-rev 插件:
$ npm install --save-dev gulp-rev
gulp-rev 插件的作用就是为静态资源添加版本号。
新建 gulpfile.js 文件:
const gulp = require('gulp');
const rev = require('gulp-rev');
// 添加版本号
gulp.task('rev', () => {
return gulp.src('src/css/*.css')
.pipe(rev()) // 将所有匹配到的文件名全部生成相应的版本号
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest()) //把所有生成的带版本号的文件名保存到rev-manifest.json文件中
.pipe(gulp.dest('rev/css')) //把rev-manifest.json文件保存到指定的路径
});
执行 rev 任务后,rev/css 文件加下多了一个 rev-manifest.json 文件。
rev-manifest.json 文件的内容如下:
{
"index.css": "index-35c63c1fbe.css"
}
然后,安装 gulp-rev-collector 插件:
$ npm install --save-dev gulp-rev-collector
gulp-rev-collector 插件主要是配合 gulp-rev 替换文件版本号。
修改 gulpfile.js 文件:
const gulp = require('gulp');
const rev = require('gulp-rev');
// 添加版本号
gulp.task('rev', () => {
return gulp.src('src/css/*.css')
.pipe(rev()) // 将所有匹配到的文件名全部生成相应的版本号
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest()) //把所有生成的带版本号的文件名保存到rev-manifest.json文件中
.pipe(gulp.dest('rev/css')) //把rev-manifest.json文件保存到指定的路径
});
const revCollector = require('gulp-rev-collector');
// 控制文件版本号
gulp.task('rev-collector', () => {
return gulp.src(['rev/**/*.json', 'src/**/*.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('dist'))
})
gulp.task('default', gulp.series('clean', 'rev', 'rev-collector'))
执行 gulp 默认任务。检查 dist 下 index.html 文件 css 的版本是否替换成功。
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器,非常适合于构建单页面的工作流程,当然也可以构建多页面的工作流程。
安装 Webpack(这里使用的是 webpack 4+ 版本)。
$ npm install --save-dev webpack webpack-cli
通过使用 output.filename 进行文件名替换,webpack 使用 [chunkhash] 替换文件名,在文件名中包含一个 chunk 相关(chunk-specific)的哈希。
安装 clean-webpack-plugin 插件(清理文件夹):
$ npm install --save-dev clean-webpack-plugin
clean-webpack-plugin 插件的作用是清理文件夹,由于每次打包的文件版本不同,输出目录会生成很多不同版本的目标文件,所以需要清理文件夹。
配置文件 webpack.config.js 如下:
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.[chunkhash:5].js', //这里设置 [chunkhash] 替换文件名,数字5为 chunkhash 的字符长度。
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist'])
]
}
在 src 目录新建一个 index.html 文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack实现静态资源版本管理自动化</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
安装 html-webpack-plugin 插件:
$ npm install --save-dev html-webpack-plugin
html-webpack-plugin 插件编译 html 替换带有哈希值版本信息的资源文件。
修改 webpack.config.js 文件:
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.[chunkhash:5].js', //这里设置 [chunkhash] 替换文件名,数字5为 chunkhash 的字符长度。
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Webpack实现静态资源版本管理自动化'
})
]
}
html-webpack-plugin 默认入口文件为 index.html,具体的参数配置请参考https://www.npmjs.com/package/html-webpack-plugin。
关于 Webpack 处理缓存的更多教程请移步官方文档。
usuallyjs函数库: https://github.com/JofunLiang/usuallyjs
来自:https://segmentfault.com/a/1190000018398039
浏览器缓存主要分为强强缓存(也称本地缓存)和协商缓存(也称弱缓存),强缓存是利用http头中的Expires和Cache-Control两个字段来控制的,用来表示资源的缓存时间。协商缓存就是由服务器来确定缓存资源是否可用.
一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求。缓存能够服务的请求越多,整体系统性能就提升得越多。
浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中,为什么使用缓存:减少网络带宽消耗,降低服务器压力,减少网络延迟,加快页面打开速度
一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面。用到了HTML5 的本地存储 API 中的 localStorage作为解决方案,回顾了下Web缓存的知识
在描述CDN的实现原理之前,让我们先看传统的未加缓存服务的访问过程,以便了解CDN缓存访问方式与未加缓存访问方式的差别,用户访问未使用CDN缓存网站的过程为:用户向浏览器提供要访问的域名;
页面打开时,由于缓存的存在,刚刚更新的数据有时无法在页面得到刷新,当这个页面作为模式窗口被打开时问题更为明显, 如何将缓存清掉?
通过在Response Header设置Cache-Control head 信息可以控制浏览器的缓存行为。我们先来看一下Cache-Control可以设置哪些值:缓存头Cache-Control只能在服务端设置,在客户端是由浏览器设置的,自己不能修改它的值。
增量更新是目前大部分团队采用的缓存更新方案,能让用户在无感知的情况获取最新内容。具体实现方式通常是(一般我们通过构建工具来实现,比如webpack):
一个后台管理系统,一个列表页A路由配置需要缓存,另一个页面B里面有多个跳转到A路由的链接。问题描述:首先访问/A?id=1页面,然后到B页面再点击访问A?id=2的页面,发现由于页面A设置了缓存,数据还是id=1的数据,并没有更新。
缓存的作用是在内存中临时存储来自外部系统(如数据库)的数据,以便让请求更快的得到响应。如果请求数据在缓存中不存在,或者已经超时失效,那么也要从外部系统查询,然后放入缓存中,这个过程叫刷新缓存。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!