manifest.json
manifest.json
经常被用在PWA,用来 告知浏览器 关于PWA应用的一些信息如应用图标、启动应用的画面。举例:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
assets-manifest.json
assets-manifest.json
经常会在create-react-app这个脚手架的打包文件上看到,由webpack-manifest-plugin
这个webpack插件产生。举例:
{
"files": {
"main.css": "/static/css/main.491bee12.chunk.css",
"main.js": "/static/js/main.14bfbead.chunk.js",
"main.js.map": "/static/js/main.14bfbead.chunk.js.map",
"runtime-main.js": "/static/js/runtime-main.e89362ac.js",
"runtime-main.js.map": "/static/js/runtime-main.e89362ac.js.map",
"static/js/2.017bb613.chunk.js": "/static/js/2.017bb613.chunk.js",
"static/js/2.017bb613.chunk.js.map": "/static/js/2.017bb613.chunk.js.map",
"index.html": "/index.html",
"precache-manifest.33b41575e0c64a21bca1a6091e8a5c6d.js": "/precache-manifest.33b41575e0c64a21bca1a6091e8a5c6d.js",
"service-worker.js": "/service-worker.js",
"static/css/main.491bee12.chunk.css.map": "/static/css/main.491bee12.chunk.css.map",
"static/media/logo.svg": "/static/media/logo.25bf045c.svg"
},
"entrypoints": [
"static/js/runtime-main.e89362ac.js",
"static/js/2.017bb613.chunk.js",
"static/css/main.491bee12.chunk.css",
"static/js/main.14bfbead.chunk.js"
]
}
wepack-mainfest-plugin
对它自身的介绍是:
This will generate a
manifest.json
file in your root output directory with a mapping of all source file names to their corresponding output file。
意思就是assets-manifest.json
其实只是源文件和加哈希后文件的一个对比表,仅此而已。它不会对应用的运行产生任何影响,浏览器也不会去请求它。
precache-manifest.js
这个文件由workbox-webpack-plugin
插件生成, 用来告诉workbox哪些静态文件可以缓存。例如:
/**
* The workboxSW.precacheAndRoute() method efficiently caches and responds to
* requests for URLs in the manifest.
* See https://goo.gl/S9QRab
*/
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
其中self.__precacheManifest
的值就是precache-manifest.js
的内容。
参考:
https://developers.google.com/web/fundamentals/web-app-manifest/developers.google.com What's assets-manifest.json and how does it work? · Issue #6436 · facebook/create-react-appgithub.com![b77b8f44acdf7f54b8972b2fc04f7faa.png](https://i-blog.csdnimg.cn/blog_migrate/aa28a1cde89843001809c5f1b036d2b0.jpeg)