使用Flask实现静态资源自动版本化

博客资源是采用ServiceWorker缓存的，这种做缓存的缺点是一旦JS文件或者CSS文件有所更新的话会导致部分功能无法正常使用

通过给文件附加版本号可以很好的解决这个问题

<script src="/static/js/a.js?v=1.0.0"></script>
<script src="/static/js/b.js?v=1.0.0"></script>

版本号可以采用数字，但采用数字作为版本号的话缺点是难以建立文件内容跟版本号的关联，我们更希望类似于下

<script src="/static/js/a.js?v=7c5d607"></script>
<script src="/static/js/b.js?v=cbb0e7a"></script>

为了建立资源文件与文件内容的关系，可以利用Flask中的Registering Filters功能来实现，首先对Flask模板渲染文件做以下更改

// 修改前
<script src="{{ url_for('static', filename='js/vue.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/mdui.min.js')}}"></script>

//修改后
<script src="{{ url_for('static', filename='js/vue.min.js')|autoversion}}"></script>
<script src="{{ url_for('static', filename='js/mdui.min.js')|autoversion}}"></script>

“autoversion”方法可以在Flask中实现如下

@app.template_filter('autoversion')
def autoversion_filter(filename):
  fullpath = os.path.join(app.root_path, filename[1:])
  try:
      timestamp = str(os.path.getmtime(fullpath))
  except OSError:
      return filename
  newfilename = "{0}?v={1}".format(filename, timestamp)
  return newfilename

资料参考