Question

我正在使用Vue cli 3，并使用PWA插件创建了PWA。一切正常，在3G连接上，我的Lighthouse Progressive Webb应用程序得分为100，性能得分为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，在这方面的任何帮助都将不胜感激。

谢谢

Vue利用浏览器缓存静态资产

0 个答案: