什么是 broccoli-rev？
broccoli-rev 是一个基于 Broccoli 构建的文件处理工具，用于将静态文件添加哈希值，以保证浏览器缓存的正确性。
安装
使用 npm 进行安装：
--- ------- ------------ ----------
使用方法
初始化
依据 broccoli 的标准做法，在 Brocfile.js 中引用 broccoli-rev：
----- --- - ------------------------
创建哈希版本的操作
如果你需要创建哈希值版本的文件，你需要使用 rev() 函数。
----- ------------ - ------------- - ---------- ---------------- ----------- ------ ------ ------ ------ ---
rev() 的第一个参数指定了输入文件夹，第二个参数是一个可选的对象，用于指定以下选项：
outputDir（可选）：输出文件夹的名称；extensions（可选）：要处理哈希值的文件类型的一个数组——例如：['js', 'css', 'png', 'jpg']，默认为 ['js', 'css', 'png', 'jpg']。所有输入文件中给定扩展名的文件将会被处理。
返回值
调用 rev() 后，你会得到一个 Broccoli 树作为返回值。
示例代码
以下是一个 Brocfile.js，我们将在 app/styles 和 app/scripts 目录中读取所有以 js 和 css 结尾的文件，并将它们复制到 dist 目录中。 此外，我们还将使用 broccoli-rev 将这些文件进行哈希值处理以保证浏览器缓存的正确性。
----- ---------- - -------------------------------- ----- ------ - --------------------------- ----- ------ - --------------------------- ----- ------ - ------------------------------ ----- ---- - ------------------------- ----- --- - ------------------------ -- ------ ----- ------ - -------------------- ----------- ----------- ----- ------------ - ----------- - ---------- ------ ----------- ------- --- ----- -------- - -------------------- - -------- ---------- -------- ---------- --- -- ------- ----- ------- - --------------------- - -------- --------- -------- ---------- --- ----- ------------- - ------------ - ---------- ----- ----------- ------ --- -- ----- ----- ----- ------ - --------------------- ---------------- -- ------ --- ------ ----- --------- - --------------------- - ----------- ------------ ----------- ------------ ---- -- ------ ---- -------------- - ------------------- ------------
指导意义
将静态文件的 URL 添加哈希是保证浏览器缓存正确性的好方法。使用 broccoli-rev，你可以很容易地将建立 URL 和哈希值的过程自动化，从而避免手动维护版本号带来的麻烦。
最终的缓存优化产生的静态资源在构建时呈现出唯一且不可重用的版本管理，它们都在使用服务端上下文中生成且通常是与一个特定的用户（或会话）关联起来。这使得在不影响客户端的情况下对每个资源进行更彻底的优化成为可能。
结论
使用 broccoli-rev 有助于确保启用静态资源缓存和减少浏览器请求。尽管这个库有点小，但它确实能够帮助你从这个繁琐的工作中解脱出来。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c88ccdc64669dde50d7