是否考虑用 service worker 客户端缓存不常用的库

[dkvirus]

问题描述

teadocs 官方文档（/lib/docs）打包之后 1.9M，其中 static 目录占了 1.8M。

static 目录大多引用的第三方库文件，这些文件除非版本升级，否则修改的次数极少。但是浏览器每次访问页面都会重复加载这些文件，造成资源浪费。

|-- font/ （128kb）  
|-- font-awesome-4.7.0/（1.3MB）  
|-- css/ （108kb）
    |-- editormd.min.css         71kb
    |-- highlight.default.min.css  （2kb）
    |-- normalize.min.css （2kb）
    |-- loading.css （21kb）          <= 开发时会修改
    |-- mobile.css（1kb）              <= 开发时会修改
    |-- monaco.css （526bit）     <= 开发时会修改
    |-- style.css （10kb）               <= 开发时会修改    
|-- js/ （232kb）
    |-- highlight.min.js （46kb）
    |-- jquery-3.3.1.min.js （87kb）
    |-- vue.min.js （86kb）       
    |-- main.js （10kb）                    <= 开发时会修改
    |-- mobile.js（3kb）                                <= 开发时会修改

上面👆统计结果，开发时可能会频繁修改的静态资源总大小 45kb （<< 1.8M）。

想法

引入 service worker 实现，在浏览器端缓存资源，下一次访问网站时提升访问速度。

只缓存第三方库和字体图标等文件，经常修改的文件不应该被缓存。

如果升级了某个库的版本，只需要修改下 service work 文件中的版本号，下一次发布网站时，捕获到 hash 码值（哪怕改了一个符号也会造成差异）不一样会自动重新缓存。

浏览器兼容问题

可以判断浏览器是否兼容 service work API，不兼容的话就不缓存，不会有任何副作用。

相关文章

• service worker 客户端缓存

[lisniuse]

可以的!