今天使用 grunt 打包将代码发到线上的时候,发现有张图片( xx.1234.png ) 404 了。图片是在 index.css 里 background 引用的。然后查找原因发现是在打包的过程中 usemin 去替换 index.css 里 xx.png 的引用后没有重新去计算 md5 和生成新的一份 index.css ,因为我们用的是 cdn , index.css 已经有缓存了,所以线上访问的 index.css 其实是上一个版本的。
找到了一个关于 md5 定位的链接( https://github.com/fouber/blog/issues/5 ),说明的应该就是这种情况。请问怎么解决这种情况,难道真的要手动去加版本号吗?
1
ffx0s OP ![此处输入图片的描述][1]
问题就出在步骤 2 上,步骤 2 计算的文件 md5 并不是文件最终的 md5 ,由于分步骤计算,第 3 步替换引用使得文件内容修改,文件最终的 md5 其实和第 2 步算出的并不一致,这导致 css 和图片的依赖关系没能建立起来。比如我们某次迭代,只更新了图片,按照上述计算,我们将得到: [1]: https://cloud.githubusercontent.com/assets/536297/7784416/6c6b5a44-0197-11e5-9b3d-ac4b9c95a033.png 请注意,我们在第 2 步中,如果仅仅根据单一文件内容进行 md5 计算,那么,只有图片因为内容改变修改了 md5 戳(红色字标出),但 css 的内容没有发生变化,所以针对 css 计算的 md5 戳与上个版本一致(蓝色字标出) 接下来进行步骤 3 的替换,严重注意,此时 index.html 替换后引用的 css 地址相比上个版本是 没有改变的,这意味着,这次发布的版本,虽然 css 内容更新了图片的地址,但 index.html 中却没有更新 css 路径,进而导致浏览器最终还是使用了上个版本的 css 文件,我们这次的图片更新没!生!效! |