Vue Leverage browser caching of static assets - caching

Question

i am using Vue cli 3 and created a PWA using the PWA plugin. it all works pretty well and i am getting a Lighthouse Progressive Webb App score of 100 and a Performance score of 68 on a 3G connection.
the problem affecting my Performance score is that i fail to "Serve static assets with an efficient cache policy".
i also tested the app on webPageTest.org and it indicates a problem with "Leverage browser caching of static assets"
my website is https://www.istimuli.com/
i am assuming that i have to use runtime caching to cache these files. i use the GenerateSW plugin and tried the runtimeCaching option but it does not work.
i'd really appreciate any help to cache these files and getting the a higher Performance score.
thanks
here's my vue.config.js file
const { GenerateSW } = require('workbox-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurgecssPlugin = require('purgecss-webpack-plugin');
// var HtmlWebpackPlugin = require('html-webpack-plugin');
const glob = require('glob-all');
const path = require('path');
module.exports = {
pwa: {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
// use: [
// {
// loader: MiniCssExtractPlugin.loader,
// },
// "css-loader"
// ]
use: [
'style-loader',
{
loader: 'css-loader', options: {
minimize: true
}
}
]
}
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin(),
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './public/index.html'),
path.join(__dirname, './src/assets/myJavascript/*.js'),
path.join(__dirname, './src/assets/css/*.css'),
path.join(__dirname, './src/components/*.vue'),
path.join(__dirname, './src/plugins/*.js'),
path.join(__dirname, './src/*.js'),
path.join(__dirname, './src/*.vue'),
])
}),
new GenerateSW({
runtimeCaching: [
{
urlPattern: new RegExp('^https://cors\.sdk.amazonaws.com/'),
handler: 'staleWhileRevalidate',
options: {
cacheableResponse: {
statuses: [0, 200]
}
}
},
{
urlPattern: /manifest/,
handler: 'staleWhileRevalidate',
options: {
expiration: {
maxEntries: 5,
maxAgeSeconds: 60 * 60 * 24 * 7,
}
}
}
]
})
],
}
}
edited
so i edited my server's htaccess file to apply cache control:
and things have improved somewhat:
i now only have the aws sdk file to contend with. i'm assuming that CORS has something to do with this. so any help regarding how to cache this would be appreciated.
further, checking the lighthouse report, i see that the aws sdk is indicated as not having an efficient cache policy - i assume that this is also linked to the CORS issue mentioned above?
there are 11 resources listed (i have only included 3 in the image) all are listed as having a cache lifespan of 30 days.is this sufficient or should it be longer to get a better lighthouse score?
i notice that the fonts file (with woff2 extension) is now cached by the browser even though i did not include this extension when i modified the htaccess file (see above).i find this confusing, any idea why its caching now and did not do so before i updated the htaccess file?
so i guess, for now my main concern is caching the aws sdk and any help in this regard would be appreciated.
thanks