采用的纯静态页面,前端打包好所有的html,然后丢到eggjs中,打包用的webpack,js和css打包后会有hash值。
但是每次发布之后,浏览器第一次访问会有缓存,还是拿到的发布之前的html,导致带有hash值的css和js 直接404,页面就渲染错乱了,体验很不好,但是h5刷新一次页面就好了,然后问题就是每个页面都要刷新一次才能访问最新的html资源。
请问这个是什么原因,有可以解决的方案吗?
具体表现可以看如下 ,清除浏览器缓存,发布一次,页面显示正常,资源加载正常。
第二次发布,不清除浏览器缓存,页面css渲染有问题,资源加载还是上一个版本的。
刷新一次浏览器,就恢复正常,
即时我加了hash,保证资源是最新的,还是出现这样的情况
eggjs 在生产环境用的config.default.js 里面设置的maxAge=0并不生效。改成config.prod.js并在启动的时候加上--env=prod 参数才生效。
因为之前用的config.default.js,导致maxAge为1年,,,,,,所以客户端缓存了html的用户就无解了,不手动清除浏览器缓存的话,就要等一年,,,,完全没留退路,,
所以,一定做好缓存策略,强缓存还是要慎用,,,而且千万不要用在 html这些静态文件上,正确的做法是html不要用缓存,保证客户端去服务端拿的永远是最新的(除非你真的万分确认这个页面是不会变的,完全静态,,),然后css、js这些可以缓存,每次更新发布之后在html中引用的js、css加上版本号就可以让客户端的css、js更新到最新了。
切记不要轻易使用强缓存,用了的话也不要设置为一年,以前要给自己留下后路。。。。