要实现“Angular CLI PWA - ngsw-config 仅对在CSS中引用的图像进行缓存”的解决方法,您可以按照以下步骤进行操作:
在项目的根目录下,创建一个名为ngsw-config.json
的文件。
在ngsw-config.json
文件中添加以下代码:
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"!/**/*.(css)"
]
}
}
]
}
angular.json
文件中找到"architect" -> "build" -> "options"
并添加以下代码:"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
这将启用service worker并将ngsw-config.json
文件与构建配置相关联。
.my-image {
background-image: url("../assets/my-image.jpg");
}
运行ng build --prod
来构建生产版本的项目。
运行ng add @angular/pwa
来添加PWA插件并自动更新ngsw-config.json
文件。
现在,在您的Angular CLI PWA项目中,只有在CSS中引用的图像将被缓存。其他图像将按需加载。