项目页面加载慢的解决办法。ServiceWork的配置

最新推荐文章于 2024-08-10 22:42:26 发布

說好樂卟見麵

最新推荐文章于 2024-08-10 22:42:26 发布

阅读量979

点赞数

分类专栏： VUE js函数 react

本文链接：https://blog.csdn.net/qq_41495998/article/details/109628421

版权

VUE 同时被 3 个专栏收录

15 篇文章 1 订阅

订阅专栏

js函数

6 篇文章 0 订阅

订阅专栏

react

4 篇文章 0 订阅

订阅专栏

1、减少 chunk-vendors.js 体积；项目实现路由懒加载；（vue 访问那个页面，加载那个页面的 js）

2、增加网络带宽

3、实现缓存机制（ServiceWork）

1.对于 public 文件的操作(vue)
在index.html 写入以下 js

（1）：在public 文件夹下创建 service-worker.js 写入以下代码


// const CACHE_NAME = Date.now(); // 版本号
const CACHE_NAME = '123'; // 版本号
self.addEventListener('install', function (event) {
  self.skipWaiting(); // 插队
  console.log('service-worker-----install', event);
  // Perform install steps
  event.waitUntil(
    caches.open('sw_demo')
      .then(cache => {
        console.log('service-worker-----install----cache', cache);
        return cache.addAll(
          []
        );
      }
      )
  );
});
self.addEventListener('fetch', function (event) {
  // console.log(event.request.url);
  event.respondWith(
    caches.match(event.request).then(res => {
      return res ||
        fetch(event.request)
          .then(responese => {
            const responeseClone = responese.clone();
            caches.open('sw_demo').then(cache => {
              // console.log('event.request', event.request);
              // console.log('responeseClone', responeseClone);
              if (event.request.url.indexOf('chrome-extension') === -1) {
                cache.put(event.request, responeseClone);
              }
            });
            return responese;
          })
          .catch(err => {
            console.log('fetch--错误', err);
          });
    })
  );
});
self.addEventListener('activate', function (event) {
  console.log('service-worker-----activate', event);
  // 监听worker的activate事件
  event.waitUntil( // 延迟activate事件直到
    caches.keys().then(function (keys) {
      return Promise.all(keys.map(function (key, i) { // 清除旧版本缓存
        if (key !== CACHE_NAME) {
          return caches.delete(keys[i]);
        }
      }));
    })
  );
});
// service-worker.js// SW 不再在 install 阶段执行 skipWaiting 了
self.addEventListener('message', event => {
  if (event.data === 'skipWaiting') {
    self.skipWaiting();
  }
});

（2）：在public 文件夹下 index.html 写入以下 js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
        #updateBox{
            width: 100%;
            color: #ffffff;
            background: #606266;
            padding: 0 10px;
        }
        .updateBoxUp{
            transition: 1s;
            height: 40px;
            line-height: 40px;
        }
        .updateBoxDown{
            height: 0px;
            line-height: 0px;
        }
    </style>
  </head>
  <body>
    <p id="updateBox" class="updateBoxDown">站点发生更新，即将刷新当前页面</p>
    <div id="app"></div>
  </body>
  <script>
    const urlStr= urlMethods('#/')  // hash 模式
    // const urlStr= urlMethods('/', 'psiweb/')  // hash 模式
    if ('serviceWorker' in navigator) {
      console.log('支持缓存-----');
      console.log(urlStr+'service-worker.js');
      // 开始注册service workers
      // navigator.serviceWorker.register('https://yp.cwjly.vip/psiweb/service-worker.js', {
      navigator.serviceWorker.register(urlStr+'service-worker.js', {
        scope: './'
      }).then(function (registration) {
        console.log('注册成功',registration);
      }).catch (function (error) {
        console.log('注册没有成功',error);
      });
    } else {
      console.log('不支持');
    }
    // hash 模式 传 '#/'
    // history 传 '/' ，二级子目录
    function urlMethods(str,directory){
      const url = window.location.href;
      if ( directory ){
        const urlArr = url.split(directory)
        console.log(urlArr);
        return urlArr[0] + directory
      }else {
        const urlArr = url.split(str)
        console.log(urlArr);
        return urlArr[0]
      }
    }

    let refreshing = false;
    navigator.serviceWorker.addEventListener('controllerchange', () => {
      if (refreshing) {
        return;
      }
      refreshing = true;
      console.log('更新----------');
      const updateDom = document.getElementById('updateBox');
      updateDom.style.display = 'block'
      updateDom.className='updateBoxUp'
      window.location.reload();
    });
  </script>
</html>