简介
fis3-prepackager-file-hash 是一个基于 fis3 的前端自动化构建工具，它可以为文件添加 MD5 hash，并自动替换文件中的引用链接。这个包可以帮助开发者解决缓存问题，提高页面性能，优化网页加载速度。
安装
要使用 fis3-prepackager-file-hash，你需要先安装 fis3：
npm install -g fis3
在安装完 fis3 之后，你可以在项目根目录下安装 fis3-prepackager-file-hash：
npm install fis3-prepackager-file-hash
使用
使用 fis3-prepackager-file-hash 非常简单。在项目配置文件（fis-conf.js）中加入以下代码即可：
fis.match('**.{js,css}', {
prepackager: fis.plugin('file-hash')
});上面的代码会将项目中所有的 .js 和 .css 文件添加 MD5 hash，并替换文件中的引用链接。如果你同时使用了其它的 fis3 插件，那么可以将 fis3-prepackager-file-hash 放到最后，以确保它能够正确处理其它插件生成的文件。
示例代码
下面以一个简单的例子来演示如何使用 fis3-prepackager-file-hash。假设我们的项目目录结构如下：
-- -------------------- ---- -------
-------
--- ----------
--- --
- --- -------
- --- ------
- - --- ---------
- --- ----
- --- -------
--- ---
--- --------首先，我们需要安装 fis3 和 fis3-prepackager-file-hash：
npm install -g fis3 npm install fis3-prepackager-file-hash
在项目配置文件（fis-conf.js）中加入以下代码：
fis.match('**.{js,css}', { prepackager: fis.plugin('file-hash') });运行 fis3 构建工具，生成带 hash 的文件：
fis3 release -d output
运行完上面的命令之后，你会在 output 目录中看到生成的文件，它们的文件名会带有 MD5 hash。例如，main.js 的文件名可能会变成 main.3df3c2d.js。
在 HTML 文件中引用带 hash 的文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------------------- ------- ------ ------- ------------------------------------------- ------- --------------------------------------- ------- ---------------------------------- ------- -------在 HTML 文件中引用带 hash 的文件，fis3-prepackager-file-hash 会自动将引用链接替换成带 hash 的链接。这样做可以确保在文件内容没有更新的情况下，浏览器可以从缓存中加载文件，提高页面性能。
总结
fis3-prepackager-file-hash 是一个非常实用的前端构建工具插件，它可以帮助开发者解决缓存问题，提高页面性能，优化网页加载速度。如果你正在开发一个前端应用程序，强烈建议你试用一下这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc881e8991b448dd471