From 55d73bc2a0cdc1dd1ebf7a7fbcac09d103941c10 Mon Sep 17 00:00:00 2001 From: Colin Rudd Date: Fri, 17 Jul 2020 15:22:08 -0400 Subject: [PATCH] Exclude / tree-shake Blueprint icons (#1977) + Works with updated `@xh/hoist-dev-utils` to swap out the full set of bundled Blueprint icon SVGs with a very minimal set of paths actually required by included components. + Actual optimization applied within `configureWebpack()` - also includes flag to prevent substitution, restoring full set of icons to app bundles. + Fixes #1963 --- CHANGELOG.md | 5 +++++ static/requiredBlueprintIcons.js | 23 +++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 static/requiredBlueprintIcons.js diff --git a/CHANGELOG.md b/CHANGELOG.md index d3a41e9172..05bcff72b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ ## v36.0.0-SNAPSHOT - unreleased +### ⚙️ Technical + +* Supports smaller bundle sizes via a greatly reduced set of BlueprintJS icons. (Requires apps to be + built with `@xh/hoist-dev-utils` v5.2 or greater to take advantage of this optimization.) + ### 📚 Libraries * @fortawesome/fontawesome-pro `5.13 -> 5.14` diff --git a/static/requiredBlueprintIcons.js b/static/requiredBlueprintIcons.js new file mode 100644 index 0000000000..d39901afef --- /dev/null +++ b/static/requiredBlueprintIcons.js @@ -0,0 +1,23 @@ +/** + * This file replaces the MUCH larger versions included within the @blueprintjs/icons dependency, + * which itself is required by Blueprint core. This file is swapped in at build-time by the + * `@xh/hoist-dev-utils` webpack config to only bundle the icons required by BP-based Hoist React + * components, nicely reducing overall app bundle size. + * + * See https://github.com/xh/hoist-react/issues/1963 for further details, see the dev-utils + * `configureWebpack()` method for the implementation referencing this file. + */ +export const IconSvgPaths16 = { + // used on context menu menuItem when a menu has submenus + 'caret-right': ['M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z'], + // used on toast close buttons + 'cross': ['M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z'], + // used on dialog close buttons + 'small-cross': ['M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z'] + +}; +export const IconSvgPaths20 = { + 'caret-right': ['M14 10c0-.31-.15-.57-.37-.76l.01-.01-6-5-.01.01C7.46 4.1 7.24 4 7 4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1 .24 0 .46-.1.63-.24l.01.01 6-5-.01-.01c.22-.19.37-.45.37-.76z'], + 'cross': ['M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z'], + 'small-cross': ['M11.41 10l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L8.59 10 5.3 13.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l3.29-3.3 3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z'] +}; \ No newline at end of file