我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔继续配置fis-config.js文件,本文中,苏南大叔对比实验的内容是静态资源的hash指纹功能。听起来的这个功能非常高大上,其实就是文件名自动改名,改名的依据就是文件的hash值。所以,其实也并不神秘,对吧?

苏南大叔:fis3配置文件之静态资源添加 hash 指纹 - fis3-hash
fis3配置文件之静态资源添加 hash 指纹(图4-1)

修改fis-config.js

上一节中,苏南大叔添加的转移路径的配置代码,继续保留即可,并不会有什么冲突。添加的新配置文件内容如下:

fis.match('*.js', {
  useHash: true
});

fis.match('*.css', {
  useHash: true
});

fis.match('*.{png,jpeg,jpg,gif,bmp,ico}', {
  useHash: true
});

这样处理后,就符合官方提及的规则覆盖原则了。一个资源同时符合两条规则的情况。

假设有两条规则 A 和 B,它俩同时命中了文件 test.js,如果 A 在 B 前面,B 的属性会覆盖 A 的同名属性。不同名属性追加到 test.js 的 File 对象上。

这个useHash,默认值就是false。就是说不给静态资源改名。苏南大叔修改为true之后,这些静态资源就会被自动改名了。当然,这个useHash: true,也可以同上一次的配置合并。

代码如下:

fis.match('*.{png,jpeg,jpg,gif,bmp,ico}', {
  release: '/asset/img/$0',
  useHash: true
});

fis.match('*.js', {
  release: '/asset/js/$0',
  useHash: true
});

fis.match('*.css', {
  release: '/asset/css/$0',
  useHash: true
});

苏南大叔:fis3配置文件之静态资源添加 hash 指纹 - fis-config2
fis3配置文件之静态资源添加 hash 指纹(图4-2)

苏南大叔:fis3配置文件之静态资源添加 hash 指纹 - fis-config2-2
fis3配置文件之静态资源添加 hash 指纹(图4-3)

发布之后看效果

发布命令如下,需要注意的是:最好把上一次的生成结果dist主动删除后,再执行下面的命令。

fis3 release -d ../dist

苏南大叔:fis3配置文件之静态资源添加 hash 指纹 - fis-config2-效果
fis3配置文件之静态资源添加 hash 指纹(图4-4)

效果看起来是不错的,多次执行命令,这些hash值也不会变化。因为相关资源文件,并没有发生变化。

小结论

静态资源添加hash指纹之后,整个项目的逼格都直线上升了。建议大家都开启这个hash配置useHash: true

更多fis3的相关经验文章,大家请点击下面的链接,查看苏南大叔的更多文章吧。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   百度    fis3