为静态文件设置智能文件指纹，助力 web 性能提升

2023-12-24 04:52:38

指纹，是近年来在前端领域，一个备受青睐的技术。相比于我们熟知的缓存机制，指纹相对来说使用更加灵活，一方面可以结合一些动态的内容，提升缓存的精准性；一方面也通过文件名的方式，让缓存更加易读易管理，还能够防止因更新而引起的缓存失效问题。提到文件指纹，我们也不得不提另外一个常见的文件哈希工具——md5。和文件指纹比起来，md5 的生成也相对复杂一些。为了便于理解，我们可以粗略的认为，md5 是通过内容计算出一个唯一且固定的字符串，而文件指纹本质上就是根据内容生成一个文件名。

指纹对于静态资源来说，是不可或缺的技术。静态资源使用 CDN，基于版本号进行管理，在这种场景下，如果同时有 10 个文件需要更新，就需要同时更新 10 个版本号，代码修改量不小；如果基于文件指纹的方式，即便同一时刻有 100 个文件需要更新，只需要更新 1 个版本号，代码量少。

今天的这篇文章，就让我们来聊一聊文件指纹，以及如何利用 Gulp 实现文件指纹。

指纹概述

首先我们了解一下，指纹是什么？文件指纹，也被称为哈希值，是根据文件的特定信息计算生成的文件信息。在 JavaScript 中，我们常常会用到的是根据文件的代码，利用一些加密算法计算出的一串字符串，用于确认文件版本，以及文件的特点。换句话来说，指纹可以用来区分文件的内容是否发生了变化。

指纹的实现过程：

利用加密算法，对文件的内容进行散列计算。
将文件的内容转换成二进制数据。
利用一个特殊的数学公式，对这些二进制数据进行计算，计算出最终的散列值。

常见的加密算法有很多，比较常用的有：MD5、SHA-1、SHA-256 等。

指纹的作用

指纹在前端开发中，有着广泛的应用。比如：

用于缓存静态资源。
用于CDN中进行版本管理。
用于webpack中进行文件分发。
用于确认构建产物是否一致。

为什么要使用 Gulp 实现指纹

Gulp 是一个著名的前端构建工具，它支持丰富的插件，可以实现各种各样的任务。
Gulp 可以实现文件指纹的自动生成，不需要手动计算。
Gulp 可以实现文件指纹的自动更新，当文件内容发生变化时，Gulp 会自动重新生成指纹。
Gulp 可以实现文件指纹的自动使用，在构建项目时，Gulp 会自动将指纹应用到对应的文件。

如何使用 Gulp 实现指纹

安装 Gulp 和 gulp-fingerprint 插件。
在项目中创建一个 gulpfile.js 文件。
在 gulpfile.js 文件中，引入 gulp-fingerprint 插件。
在 gulpfile.js 文件中，定义一个任务，用于生成指纹。
在 gulpfile.js 文件中，定义一个任务，用于使用指纹。
运行 Gulp 任务，生成指纹并使用指纹。

示例代码：

const gulp = require('gulp');
const fingerprint = require('gulp-fingerprint');

gulp.task('fingerprint', () => {
  return gulp.src('./src/assets/**/*')
    .pipe(fingerprint())
    .pipe(gulp.dest('./dist/assets'));
});

gulp.task('use-fingerprint', () => {
  return gulp.src('./src/index.html')
    .pipe(fingerprint({
      src: './dist/assets'
    }))
    .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['fingerprint', 'use-fingerprint']);