Fork me on GitHub

After a few months in typescript land 🥲, today at work I prepared the floor for a new project: figwheel.main, uix, chakra-ui via NPM, :auto-bundle :webpack. I'm so happy to have it all working with nrepl & nvim conjure in dev 🥳 It failed with :auto-bundle :parcel as the cli options for the latest parcel version are different from what figwheel generates. And when I tried to configure :bundle-cmd manually for parcel I failed to find a cli option to define the final bundle filename. So webpack it is! The project works with advanced optimizations BUT the final production bundle weights 1.1MB 😱. A bit heavy for a button that increments a counter 😅 I guess webpack packed the totality of chakra-ui in it ... src/gybe/hello.cljs

(ns ^:figwheel-hooks gybe.hello
   [uix.core.alpha :as uix]
   [uix.dom.alpha :as uix.dom]
   ["@chakra-ui/react" :as ckui]))

(defn hello []
  [:> ckui/Heading (str "Hello there! it's " (.format (moment) "dddd"))])

(defn button [{:keys [on-click]} text]
  [:> ckui/Button {:on-click on-click}

(defn app []
  (let [state* (uix/state 0)]
     [button {:on-click #(swap! state* dec)} "-"]
     [:> ckui/Badge {:color-scheme "green"} @state*]
     [button {:on-click #(swap! state* inc)} "+"]]))

(defn themed-app []
  [:> ckui/ChakraProvider [app]])

(defn ^:after-load render []
  (uix.dom/render [themed-app] (js/document.getElementById "app")))

(defonce init


I am looking for experience or poiners on how to make webpack outputs a lighter bundle for production 👀 👂


After a bit of trial and error I got some results. The final bundle is now ~400KB. -300KB after requiring from sub-packages instead of the top one

-   ["@chakra-ui/react" :as ckui]))
+   ["@chakra-ui/button" :refer [Button]]
+   ["@chakra-ui/layout" :refer [Heading Badge]]
+   ["@chakra-ui/provider" :refer [ChakraProvider]]
+   ["@chakra-ui/theme" :refer [theme]]))
-300KB after removing moment lib (Oops!)


400KB I guess this is the price to pay to have ready-to-use UI bricks.