在服务辅助角色中预缓存生成的资产

Question

我有一些资源是在运行时或构建时生成的，例如脚本，CSS等
文件格式是这样的main.min.63716273681.js，其他资源也是如此。

不幸的是，我无法使用sw-precache库或与我的构建集成的任何内容。

我如何预缓存这些资源，是否可以使用正则表达式来预缓存？

注意：问题是关于预缓存资源，并且资源由AEM(Adobe体验管理器(生成

Answer 1

安装 webpack-manifest-plugin 并在 webpack 配置文件的顶部导入

const ManifestPlugin = require('webpack-manifest-plugin');

在您的 webpack 插件部分中使用以下代码，这将生成一个文件名 asset-manifest.json，其中包含由 webpack 构建的所有资产

new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: your public path here,
}),

它将生成包含以下内容的文件

//asset-manifest.json

{
"files": {
"about.js": "/static/js/about.bc816d03.chunk.js",
"about.js.map": "/static/js/about.bc816d03.chunk.js.map",
"dashboard.js": "/static/js/dashboard.f180c270.chunk.js",
"dashboard.js.map": "/static/js/dashboard.f180c270.chunk.js.map",
"homepage.js": "/static/js/homepage.4dd0316c.chunk.js",
"homepage.js.map": "/static/js/homepage.4dd0316c.chunk.js.map",
"login.js": "/static/js/login.1b8cf466.chunk.js",
"login.js.map": "/static/js/login.1b8cf466.chunk.js.map",
"logout.js": "/static/js/logout.ac3c5758.chunk.js",
"logout.js.map": "/static/js/logout.ac3c5758.chunk.js.map",
"main.css": "/static/css/main.977b6895.chunk.css",
"main.js": "/static/js/main.a65a1d5d.chunk.js",
"main.js.map": "/static/js/main.a65a1d5d.chunk.js.map",
"profile.js": "/static/js/profile.20ae3dae.chunk.js",
"profile.js.map": "/static/js/profile.20ae3dae.chunk.js.map",
"runtime-main.js": "/static/js/runtime-main.ad8b0a50.js",
"runtime-main.js.map": "/static/js/runtime-main.ad8b0a50.js.map",
"static/js/8.796ce7e3.chunk.js": "/static/js/8.796ce7e3.chunk.js",
"static/js/8.796ce7e3.chunk.js.map": "/static/js/8.796ce7e3.chunk.js.map",
"index.html": "/index.html",
"precache-manifest.e770a629726af82e25b547dd941bae89.js": "/precache-manifest.e770a629726af82e25b547dd941bae89.js",
"service-worker.js": "/service-worker.js",
"static/css/main.977b6895.chunk.css.map": "/static/css/main.977b6895.chunk.css.map",
"static/js/8.796ce7e3.chunk.js.LICENSE.txt": "/static/js/8.796ce7e3.chunk.js.LICENSE.txt",
"static/media/arvidsson.jpg": "/static/media/arvidsson.4d6f8e0d.jpg",
"static/media/logo.jpg": "/static/media/logo.8caa15b8.jpg",
"static/media/pekka.jpg": "/static/media/pekka.1eab475c.jpg"
},
"entrypoints": [
"static/js/runtime-main.ad8b0a50.js",
"static/js/8.796ce7e3.chunk.js",
"static/css/main.977b6895.chunk.css",
"static/js/main.a65a1d5d.chunk.js"
]
}

您可以读取asset-manifest.json文件并获取 Files 对象并迭代并检查密钥是否最终具有.js。

希望这能回答你的问题。