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, и любая помощь в этом отношении будет признательна.

спасибо