在前端开发中，静态资源的缓存是非常重要的一个环节，它能够提升网站的加载速度并减轻服务器的负担。makestatic-fingerprint 是一个可以自动给静态资源添加 fingerprint 的 npm 包，它能够帮助我们快速解决静态资源缓存的问题。
安装
使用 npm 进行安装：
npm install --save makestatic-fingerprint
使用方法
1. 在 Webpack 中使用
在 Webpack 中通过 makestatic-fingerprint 自动给静态资源添加 fingerprint。
-- -------------------- ---- -------
----- --------------------------- - ----------------------------------
-------------- - -
-- ---
-------- -
--- -----------------------------
---------- ---------
------------------ -------- ------ ----- --------
---
--
-- ---
--MakeStaticFingerprintPlugin 的参数：
outputDir(string): 指定你存放静态资源的文件目录replaceExtensions(Array): 需要替换的文件后缀名，默认为['html', 'css', 'js']
2. 在 gulp 或者 grunt 中使用
在 gulp 或者 grunt 中通过 makestatic-fingerprint 自动给静态资源添加 fingerprint。
const makestaticFingerprint = require('makestatic-fingerprint');
gulp.task('makestatic-fingerprint', () => {
return gulp.src(['./public/**/*.{html,css,js}'])
.pipe(makestaticFingerprint())
.pipe(gulp.dest('./public/'));
});示例代码
可以通过以下的示例代码测试 makestatic-fingerprint。
-- -------------------- ---- ------- ------ ------ ------------------------------------- ----- ---------------- ----------------- ------- ------------------------- ------- ------ ---------- ---------------------------- ------- -------
执行命令：
npm run build
得到的输出结果：
-- -------------------- ---- ------- ------ ------ ------------------------------------- ----- ---------------- -------------------------- ---- --- ----------- --- ------- ---------------------------------- ---- --- ----------- --- ------- ------ ---------- ---------------------------- ------- -------
指导意义
在前端开发中，缓存再怎么优化都不过分，静态资源的缓存也是其中一个重要的环节。makestatic-fingerprint 这个 npm 包能够帮助我们自动的给静态资源添加 fingerprint，可以更好地解决静态资源缓存的问题，提升网站的性能表现。同时，也可以减轻服务器的负担，提升网站访问速度，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c781e8991b448e8ede