一定要看：一定要看：一定要看这句话：小元今天有点迷糊，没啥好数字，参考下
7
今天看到一个很好的移动缓存文档，分享给大家。
转自前端开发博客
移动端带宽流量要比pc端宝贵的多, 200k的资源在pc端毫无压力，但在不稳定的移动3g下，需要1s中左右。Wi-Fi情况下网络延迟很大，达到200-400ms，直接结果就是304或者200情况下css,js加载很慢，加大白屏时间。
当前问题是如何缓存webpack打包的bundle js文件,提高移动端第二次访问速度?
探索方案：service worker cache
缓存是service worker做得很好的事情之一,要安装 service worker ，你需要在你的页面上注册。下面的代码会告诉浏览器你的 service worker 脚本在哪里。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(() => {
console.log('Service worker registered!');
}).catch((error) => {
console.log('Error registering service worker: ', error);
});
} else {
console.log('Not supported by browser');
}
通过webpack.config.js配置，添加sw-precache-webpack-plugin插件
new SWPrecacheWebpackPlugin(
{
cacheId: 'cqaso-web-mobile',
filename: 'service-worker.js',
verbose: true,
}
)
SWPrecacheWebpackPlugin是一个webpack插件，用于使用service worker来缓存外部项目依赖项。 它将使用sw-precache生成service worker文件并将其添加到您的构建目录。为了在service worker中生成预缓存的名单, 这个插件必须应用在assets已经被webpack打包之后。
然而，这个方案只能在HTTPS协议中应用，http不能生效。
更多前端内容 请点击关注
网友评论