完成其工作后,WebPack输出似乎是块分辨率清单,如下所示:
window.__JS_CHUNKS__ = { "@ourcorp/coupon-pages~._node_modules_@ourcorp_coupon-pages_src_c": "@ourcorp/coupon-pages~._node_modules_@ourcorp_coupon-pages_src_c.eaabef68ce.js", "containers/DigitalCouponsContainer~._node_modules_@": "containers/[email protected]", "@ourcorp/example-single-route~._node_modules_@ourcorp_example-single-route_src_c": "@ourcorp/example-single-route~._node_modules_@ourcorp_example-single-route_src_c.3e7438a4fb.js", "@ourcorp/meal-planning-ui~._node_modules_@ourcorp_meal-planning-ui_dist_i": "@ourcorp/meal-planning-ui~._node_modules_@ourcorp_meal-planning-ui_dist_i.fd270269e2.js", "routes-LandingPage-LandingPageConnector~._node_modules_@": "routes-LandingPage-LandingPageConnector~._node_modules_@.21b70c9545.js", "routes-MyListPage-MyListPageConnector~._node_modules_@": "routes-MyListPage-MyListPageConnector~._node_modules_@.1028dc74cb.js", "routes-MyPlansPage-MyPlansPageConnector~._node_modules_@": "routes-MyPlansPage-MyPlansPageConnector~._node_modules_@.c1d664a6be.js", "routes-MyRecipesPage-MyRecipesPageConnector~._node_modules_@": "routes-MyRecipesPage-MyRecipesPageConnector~._node_modules_@.650d63811e.js", "routes-PlanDetailPage-PlanDetailPageConnector~._node_modules_@": "routes-PlanDetailPage-PlanDetailPageConnector~._node_modules_@.34ec62e971.js", "routes-RecipeCategoryPage-RecipeCategoryPageConnector~._node_modules_@": "routes-RecipeCategoryPage-RecipeCategoryPageConnector~._node_modules_@.948bfcf4a1.js", // many more omitted for brevity }
这些字符串看起来很长且重复,尽管gzip负责网络事务,但我也想减少JavaScript在解压缩后的解析/评估时间。
我有一些关于缩写这些字符串的想法,但是Webpack的文档尚不清楚如何使用该对象解析块,因此,我确定我缺少一些想法或即将破坏某些东西。
缩写ourcorp
为o
或其他名称
将_node_modules_
缩写为//
或与将来的Webpack语法不太可能冲突的东西
使用字符长度最短且不太可能发生冲突的Base64块哈希
如果属性值包含属性名称,则引用属性名称字符串。 例如,
"containers/SearchGrids~._node_modules_@": "containers/[email protected]"
会成为
"containers/SearchGrids~._node_modules_@": "#.26b7dbe62b.js"