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
(:require
[moment]
[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}
text])
(defn app []
(let [state* (uix/state 0)]
[:<>
[hello]
[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
(do
(enable-console-print!)
(render)))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.