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

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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Pattern Recognition and Machine Learning

Christopher Bishop / Springer / 2007-10-1 / USD 94.95

The dramatic growth in practical applications for machine learning over the last ten years has been accompanied by many important developments in the underlying algorithms and techniques. For example,......一起来看看《Pattern Recognition and Machine Learning》这本书的介绍吧!

码农工具