After running my Angular 5 website through Google's PageSpeed Insights, it flagged an issue regarding leveraging browser caching. The specific files mentioned were:
https://use.typekit.net/####.css (10 minutes)
https://www.googletagmanager.com/gtm.js?id=GTM-#### (15 minutes)
https://####.firebaseapp.com/assets/svgs/###.svg (60
minutes)
My firebase.json file is structured as follows:
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
},
{
"source": "**/*.@(js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=604800"
}
]
},
{
"source": "**/*.@(jpg|jpeg|gif|png|svg)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=604800"
}
]
},
{
"source": "404.html",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=300"
}
]
}
]
},
"functions": {
"predeploy": [
"npm --prefix $RESOURCE_DIR run lint"
],
"source": "functions"
}
}
I tried implementing solutions from a post on utilizing browser caching in Firebase hosting (How to Leverage Browser Caching in Firebase hosting), but unfortunately, the error persists even after rerunning PageSpeed Insights. Any advice or guidance on resolving this issue would be greatly appreciated since I am relatively new to Angular. Thank you for your help!