注册 登录
当前位置: 首页 » 开发笔记 » 详情:传统模版页面中使用less的缓存问题

传统模版页面中使用less的缓存问题

在前后端分离的开发模式中less是将样式编译成css随项目一起打包的,而传统模板页面引用的less是将样式编译后动态插入到head标签中,同时保存在localStorage中,如果引用的less是加上版本号的,比如这样:

<link rel="stylesheet/less" type="text/css" href="/theme/default/static/style/style.less?cc5e3bb904cb1b4801a73aefc25625bc">

那么每次有新的版本都会生成缓存存入localStorage,久而久之会产生一大堆不必要的缓存,经测试(插入2096条数据,每条数据大概5K),目前chrome的上限是10M左右,达到上限后,同名则会替换,无法插入新的数据,而less也会报错:

failed to save "https://*.com/style.less" to local storage for caching.

所以如果在传统模版页面中使用less需要定期或通过特定条件清理缓存:

for (var key in window.localStorage) {
	if (key.indexOf('.less') >= 0) {
		delete window.localStorage[key];
	}
}

打赏支持

所有资源来源于各大网盘,本站不储存任何资源文件,只展示资源链接,侵删!
移动端浏览