离线缓存静态资源，快速开启网站，加快网站二次开启速度，秒开网站。
vue 打包添加 service worker。
webpack 打包添加 service worker。
只需引入插件并在打包时调用，无需其它任何操作，一件打包
Vue项目 或基于 Webpack 搭建的单页面应用，在打包时自动生成并插入 Service Worker 文件。
网站部署后，用户进入网站会自动安装 Service Worker，并按需加载并离线缓存项目文件，当项目更新时会立即刷新页面并重新离线缓存资源。
目前不支持跨域资源缓存。
您的项目要有 https 协议才能使 Service Worker 生效。
需要使用 service-worker-webpack-plugin 包，先进行安装：
npm install -D generate-service-worker-webpack-plugin
Vue 及 Webpack 项目可参考以下代码修改配置文件文件，
Vue项目如果没有 vue.config.js 可自己创建。
const GenerateServiceWorkerWebpackPlugin = require('generate-service-worker-webpack-plugin')
module.exports = {
// ...
configureWebpack: config => {
let plugins = []
if (process.env.NODE_ENV === 'production') {
plugins.push(new GenerateServiceWorkerWebpackPlugin({
// service worker 文件名称
name: 'sw',
// 版本号
version: '1.1.0',
// 匹配文件名，成功则不进行离线缓存
excache: /(\.map$|\.mp4$)/,
// 缓存大小在此范围内文件，单位：字节
size: [0, 1024 * 1024],
}));
}
config.plugins = [
...config.plugins,
...plugins
];
}
// ...
}
打包之后代码结构如下：
image.png
index.html文件里已经添加了引入sw.js的代码。
image.png
