【每日一题】- 2019-12-19 - webpack manifest有什么实际使用场景？

azl397985856 commented 4 years ago

在使用 webpack 构建的典型应用程序或站点中，有三种主要的代码类型：

你或你的团队编写的源码。
你的源码会依赖的任何第三方的 library 或 "vendor" 代码。
webpack 的 runtime 和 manifest，管理所有模块的交互。

那么manifest是什么，用来做什么的？

参考：这里其实有一个webpack manifest生成的插件 https://github.com/danethurber/webpack-manifest-plugin

ideago commented 4 years ago

个人看帖子用过webpack的dll 插件技术，dll就和windows的dlls差不多一回事，动态链接库，运行时加载。webpack的DllPlugin会把你指定要分离的第三库打包成一个js，并生成一个mainfest.json文件。此文件是个索引文件，记录了你的第三方库的源码在哪，比如react的源码在 ./node_modules/react-dom/umd/react-dom.production.min.js

feikerwu commented 4 years ago

manifest 用来记录资源明名具体资源（一般带hash）地址的一个映射，大概长这样

{
  "index.css": "./static/css/index.971fcb.css",
  "index.js": "./static/js/index.35da80.js",
  "index.js.map": "./sourcemaps/index.35da80.js.map",
  "manifest.js": "./static/js/manifest.d602b4.js",
  "manifest.js.map": "./sourcemaps/manifest.d602b4.js.map",
  "vendor.js": "./static/js/vendor.3bf5a2.js",
  "vendor.js.map": "./sourcemaps/vendor.3bf5a2.js.map",
  "index.html": "./index.html"
}

在实际场景中，拿到这样的一份资源配置，可以做很多事，记一下实操过的

做离线缓存，在service-worker中根据这份配置中的资源路径去缓存（实际上，可能在webpack runtime 的时候生成一个类似manifest的专用于离线缓存的配置，可以参考workbox）
做预加载，在生成这个manifest的时候，可以改改插件代码，以vue-router为例，以路径名为key，以路径名对应的组件内部资源列表作为value，搭配quicklink之类的预加载包，在用户访问首页后的idle时间去加载接下来可能会被点击的资源路径
如何是webview内，生成manifest后，还可以直接塞给客户端开发，让他们在此基础上做离线缓存，增量更新，wifi环境下预加载等

azl397985856 / fe-interview

【每日一题】- 2019-12-19 - webpack manifest有什么实际使用场景？ #85