前端静态资源自动化处理版本号防缓存

栏目: Node.js · 发布时间: 5年前

内容简介:浏览器会默认缓存网站的静态资源文件,如: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 处理缓存的更多教程请移步官方文档。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web渗透技术及实战案例解析

Web渗透技术及实战案例解析

陈小兵 / 范渊、孙立伟 / 电子工业出版社 / 2012-4 / 89.00元

《Web渗透技术及实战案例解析》从Web渗透的专业角度,结合网络安全中的实际案例,图文并茂地再现Web渗透的精彩过程。《Web渗透技术及实战案例解析》共分7章,由浅入深地介绍和分析了目前网络流行的Web渗透攻击方法和手段,并结合作者多年的网络安全实践经验给出了相对应的安全防范措施,对一些经典案例还给出了经验总结和技巧,通过阅读《Web渗透技术及实战案例解析》可以快速掌握目前Web渗透的主流技术。《......一起来看看 《Web渗透技术及实战案例解析》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具