Vue Используйте браузер кеширования статических активов

Question

Я использую Vue Cli 3 и создал PWA с помощью плагина PWA. все это работает довольно хорошо, и я получаю оценку Lighthouse Progressive Webb App, равную 100, и оценку производительности 68 при соединении 3G.

проблема, влияющая на мою оценку производительности, заключается в том, что мне не удается "обслуживать статические ресурсы с помощью эффективной политики кэширования".

Я также протестировал приложение на webPageTest.org, и это указывает на проблему с "Использовать в браузере кэширование статических ресурсов"

мой сайт https://www.istimuli.com/ я предполагаю, что мне нужно использовать кэширование во время выполнения для кэширования этих файлов. Я использую плагин GenerateSW и попробовал вариант runtimeCaching, но он не работает.

Я был бы очень признателен за любую помощь для кэширования этих файлов и получения более высокой оценки производительности.

Спасибо

вот мой файл vue.config.js

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,
                            }
                        }
                    }
                ]
            })
        ],
    }
}

отредактированный

поэтому я отредактировал файл htaccess моего сервера, чтобы применить управление кешем:

и вещи немного улучшились:

Теперь у меня есть только файл AWS SDK, чтобы бороться с. Я предполагаю, что CORS как-то связан с этим. поэтому любая помощь относительно того, как кешировать это, будет оценена.

далее, проверяя отчет маяка, я вижу, что в aws sdk указано, что у него нет эффективной политики кэширования - я предполагаю, что это также связано с проблемой CORS, упомянутой выше?

В списке 11 ресурсов (я включил только 3), и все они указаны как имеющие срок жизни кеша 30 дней. Этого достаточно или должно быть больше времени, чтобы получить лучшую оценку маяка?

Я заметил, что файл шрифтов (с расширением woff2) теперь кэшируется браузером, хотя я не включил это расширение, когда я изменил файл htaccess (см. выше). Я нахожу это странным, любая идея, почему его кэширование сейчас и не было сделать это, прежде чем я обновил файл htaccess?

так что я думаю, сейчас моя главная задача - кэширование AWS SDK, и любая помощь в этом отношении будет принята с благодарностью.

Спасибо