内容简介：浏览器会默认缓存网站的静态资源文件，如：js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰，最常见的问题就是不能及时更新静态资源，造成新版本发布时用户无法及时看到新版本的变化，严重影响了用户体验。上述问题，最简单的办法就是在资源的请求路径上添加版本号，格式如下：每次在更改资源的时候，手动修改版本号，但是每次手动改那么多后缀有些费事，现在有很多的工具可以让我们更轻松的完成这项工具。本文将探讨使用目前最流行的前端构建工具 Gulp 和 Webpack 自动化为静态资源添加版本号防缓存处理。
前端静态资源自动化处理版本号防缓存
浏览器会默认缓存网站的静态资源文件，如：js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰，最常见的问题就是不能及时更新静态资源，造成新版本发布时用户无法及时看到新版本的变化，严重影响了用户体验。
上述问题，最简单的办法就是在资源的请求路径上添加版本号，格式如下：
url?v=1.0.0
每次在更改资源的时候，手动修改版本号，但是每次手动改那么多后缀有些费事，现在有很多的 工具 可以让我们更轻松的完成这项工具。本文将探讨使用目前最流行的前端构建工具 Gulp 和 Webpack 自动化为静态资源添加版本号防缓存处理。
使用 Gulp 处理文件版本
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 处理文件版本
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 处理缓存的更多教程请移步官方文档。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
用户力：需求驱动的产品、运营和商业模式
郝志中 / 机械工业出版社 / 2015-11-1 / 59.00
《用户力：需求驱动的产品、运营和商业模式》从用户需求角度深刻阐释了互联网产品设计、网络运营、商业模式构建的本质与方法论！ 本书以“用户需求”为主线，先用逆向思维进行倒推，从本质的角度分析了用户的需求是如何驱动企业的产品设计、网络运营和商业模式构建的，将这三个重要部分进行了系统性和结构化的串联，然后用顺向思维进行铺陈，从实践和方法论的角度总结了企业究竟应该如围绕用户的真实需求来进行产品设计、网......一起来看看 《用户力：需求驱动的产品、运营和商业模式》 这本书的介绍吧!
