Минимизировать имена чанков в Webpack - PullRequest
Новая
       22

Минимизировать имена чанков в Webpack

1 голос
/ 09 мая 2019

После этого 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/DigitalCouponsContainer~._node_modules_@.45aea662bd.js",
 "@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/SearchGrids~._node_modules_@.26b7dbe62b.js"

    станет 

    "containers/SearchGrids~._node_modules_@": "#.26b7dbe62b.js"
...