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

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

修改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指纹 - fis-config2-2

发布之后看效果

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

fis3 release -d ../dist

fis3配置文件之静态资源添加hash指纹 - fis-config2-效果

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

小结论

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

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

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。