如何修复改进性能的审核灯塔建议

Question

我在 chrome 中对我正在为 udacity 移动网络专家项目开发的 Web 应用程序进行了审核，我的性能得分为 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;
})
});
})
);
});