在前端开发中，优化加载速度一直是一个重要的话题。其中，静态资源的优化是非常重要的一方面。在开发过程中，我们会使用类似于 gulp、webpack 等工具来对静态资源进行处理，其中一个重要的功能就是对静态资源进行版本控制。而 npm 包 ge-asset-rev 就是专门用来为静态资源添加版本号的。
什么是 ge-asset-rev
ge-asset-rev 是一个前端资源版本控制工具，能够为 CSS、JavaScript、图片等静态资源添加版本号，并自动更新引用该静态资源的文件中的引用路径。通过给静态资源添加版本号，一方面可以解决浏览器缓存造成的静态资源更新不及时的问题，另一方面还可以缓解 CDN 缓存问题。
如何使用 ge-asset-rev
安装
使用 npm 进行命令行安装：
npm install ge-asset-rev --save-dev
配置
在使用之前，我们需要对 ge-asset-rev 进行配置。在项目根目录下新建一个配置文件 rev-config.json，内容如下：
-- -------------------- ---- -------
-
------------ ---------
------------------- -----------------------------
--------- -----
-------- -----
--------- -----
----------- -
----------------
---------------------
-
-outputDir: 资源输出目录，即处理后的资源将存放的位置。manifestFileName: 存储静态资源映射关系的文件名。revCss: 是否需要处理 CSS 的版本号。revJs: 是否需要处理 JavaScript 的版本号。revImg: 是否需要处理图片的版本号。patterns: 数组类型，表示需要进行版本控制的文件路径，可以使用 glob 模式。其中，**/*.{js,css}表示匹配所有的 js 和 css 文件，!**/node_modules/**表示排除 node_modules 目录。
使用
在配置好 ge-asset-rev 后，我们可以在命令行中使用命令进行版本控制：
ge-asset-rev
命令执行完后，我们可以在配置的 outputDir 目录下看到静态资源已经被处理，并生成一个 manifestFileName 文件存储静态资源映射关系。
接下来，我们需要在 HTML 文件中使用生成的带有版本号的资源路径。可以使用类似于以下代码：
<link rel="stylesheet" href="/static/css/app.5276e322.css"> <script src="/static/js/app.d6b04be2.js"></script>
其中，/static 是资源的根目录，app.5276e322.css 和 app.d6b04be2.js 则表示使用的带版本号的资源文件名。这些文件名可以通过在 HTML 中引用 /ge-asset-rev-manifest.json 文件获取，代码如下：
-- -------------------- ---- -------
----- ---------------- --------------------- -------------------------------- ----
------- ------------------- ------------------------------ -------------
--------
-- ----------
--- --- - --- -----------------
--------------- ------------------------------ ------
---------- - -------- -- -
--- --------- - -----------------------------
-- ---
--
-----------
---------这样，项目中的静态资源就已经被添加了版本号。
总结
ge-asset-rev 是一个非常方便的前端资源版本控制工具，可以为静态资源添加版本号，并可以自动更新引用该静态资源的文件中的引用路径。在项目中使用该工具，可以有效提升静态资源的加载速度和缓存控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2581e8991b448dadcc