如何修復審計燈塔建議以提高績效

Question

我正在為udacity移動Web專家項目開發的Web應用程序進行chrome審核，並且性能得分為85。 我需要獲得90分以上的分數才能通過該項目。

這是診斷信息-

1. 對發現的14個資產使用無效的緩存策略

   較長的緩存生存期可以加快對頁面的重復訪問。

2. 具有顯着的主線程工作6,520 ms

   考慮減少花在解析，編譯和執行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。-每當我嘗試壓縮或縮小我的JavaScript時，我總是會收到類似-錯誤的令牌：的錯誤。 我知道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;
    })
  });
})
);
});