如何修复审计灯塔建议以提高性能

Question

我在 chrome 中对我正在为 udacity 移动网络专家项目开发的网络应用程序进行了审核，我的性能得分为 85。 我需要获得 90 分及以上的分数才能通过该项目。

这里是诊断 -

1. 对静态资产使用低效的缓存策略 找到 14 个资产

   较长的缓存生命周期可以加快对您页面的重复访问。

2. 有显着的主线程工作 6,520 毫秒

   考虑减少解析、编译和执行 JS 所花费的时间。您可能会发现交付较小的 JS 有效负载对此有所帮助。

3. JavaScript 启动时间太长 3,810 毫秒

   考虑减少解析、编译和执行 JS 所花费的时间。您可能会发现交付较小的 JS 有效负载有助于解决此问题

这是我的服务工作者脚本的一部分。 -

importScripts("/js/idb.js");
importScripts("/js/dbhelper.js");
const staticCacheName = 'restaurant-1';
const resourcesToCache = [
'/',
'index.html',
'restaurant.html',
'css/styles.css',
'js/idb.js',
'js/dbhelper.js',
'js/restaurant_info.js',
'js/main.js',
'sw.js',
'img/1_small.jpg',
'img/1_medium.jpg',
'img/1_large.jpg',
'img/2_small.jpg',
'img/2_medium.jpg',
'img/2_large.jpg',
'img/3_small.jpg',
'img/3_medium.jpg',
'img/3_large.jpg',
'img/4_small.jpg',
'img/4_medium.jpg',
'img/4_large.jpg',
'img/5_small.jpg',
'img/5_medium.jpg',
'img/5_large.jpg',
'img/6_small.jpg',
'img/6_medium.jpg',
'img/6_large.jpg',
'img/7_small.jpg',
'img/7_medium.jpg',
'img/7_large.jpg',
'img/8_small.jpg',
'img/8_medium.jpg',
'img/8_large.jpg',
'img/9_small.jpg',
'img/9_medium.jpg',
'img/9_large.jpg',
'img/10_small.jpg',
'img/10_medium.jpg',
'img/10_large.jpg',
'https://unpkg.com/leaflet@1.3.1/dist/images/marker-icon.png',
'https://unpkg.com/leaflet@1.3.1/dist/leaflet.css',
'https://unpkg.com/leaflet@1.3.1/dist/leaflet.js'
];

对于 2 和 3。 - 每当我尝试压缩或缩小我的 javascripts 时，我总是会收到类似的错误 - Unexpected token:。 我确定 js 没有错误。

我该如何解决这些问题，以便获得 90 或以上的性能分数？

Answer 1

已修复。我不得不更改我的部分服务人员代码 (sw.js)

来自

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, { ignoreSearch: true }).then(response => {
  return response || fetch(event.request).then(res => {
    return caches.open(staticCacheName).then(cache => {
      cache.put(event.request, res.clone());
      return res;
    })
  });
})
);
});

到

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, { ignoreSearch: true }).then(response => {
  return response || fetch(event.request).then(res => {
    if (!res || res.status !== 200 || res.type !== 'basic') {
      return res;
    }
    return caches.open(staticCacheName).then(cache => {
      cache.put(event.request, res.clone());
      return res;
    })
  });
})
);
});