现在单页应用越来越多,前端能做的事也越来越多,但随之而来的问题是一个单页应用的 CSS 和 JavaScript 代码的体积也越来越大。应用每次初始化的时候都要加载这些庞大的资源,虽然浏览器有自己的缓存机制,但首先它并不一定靠谱,其次即使缓存有效,每次加载资源时也要向服务器发送一次请求进行确认,这一成本并不能省略。

现在,一款解决这个问题的小工具来了,它就是 —— bowl

bowl 是一个用 localStorage 来缓存脚本和样式资源的加载器。在获取脚本和样式之后,这个小巧的 JavaScript 库会将它们保存到浏览器的 localStorage 中。当这个文件下次再被请求的时候,bowl 将会从 localStorage 中读取并将它插入到页面中。

另外,它不仅可以管理前端资源的缓存,在不需要缓存的时候也可以作为一个普通的加载器来使用,页面中用到的 CSS 和 JavaScript 资源都可以用它来加载。

要想了解更多 bowl 的功能和使用方法,请狠狠 戳这里

你可能感兴趣的文章

limichange · 2016年12月07日

这个策略,百度有在用。
这个想法是很好的,但其实有很多的麻烦,比如安全等,而且增加了业务的复杂度。

回复

classicemi 作者 · 2016年12月07日

是的,这个方案更多还是表达一种解决思路,是不是要用还是要根据实际情况判断。

回复

array_huang · 2016年12月08日

这个方案可以跟webpack合用么?

回复

classicemi 作者 · 2016年12月08日

如果要用 webpack 的话,最简单的使用方式就是在页面的模板里写入脚本,只要让 webpack 用构建生成的文件地址替换 url 即可,随便举个例子:

bowl.add({
  key: 'app',
  url: '<%=htmlWebpackPlugin.files.chunks.app.entry%>'
})

目前 bowl 通过 key 识别文件,通过 url 中的 hash 识别版本。

回复

载入中...
classicemi classicemi

1.1k 声望

发布于专栏

Orange的前端笔记

前端,随笔,生活记录

39 人关注