2

我正在使用 Vue cli 3 并使用 PWA 插件创建了一个 PWA。这一切都运行得很好，我在 3G 连接上获得了 100 分的 Lighthouse Progressive Webb 应用程序得分和 68 分的性能得分。

影响我的性能分数的问题是我未能“使用有效的缓存策略提供静态资产”。

我还在 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，在这方面的任何帮助将不胜感激。

谢谢

4

0 回答 0