This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-01-27
Channels
- # announcements (1)
- # aws (10)
- # babashka (53)
- # calva (133)
- # clj-kondo (46)
- # cljdoc (6)
- # cljs-dev (33)
- # clojure (105)
- # clojure-boston (1)
- # clojure-europe (11)
- # clojure-nl (4)
- # clojure-poland (1)
- # clojure-switzerland (6)
- # clojure-uk (13)
- # clojurescript (106)
- # cursive (1)
- # datascript (2)
- # emacs (13)
- # events (1)
- # figwheel-main (4)
- # fulcro (17)
- # graphql (8)
- # heroku (2)
- # honeysql (8)
- # lsp (76)
- # luminus (30)
- # malli (12)
- # meander (23)
- # music (1)
- # nextjournal (83)
- # off-topic (6)
- # pathom (3)
- # polylith (19)
- # re-frame (8)
- # reagent (2)
- # reveal (3)
- # shadow-cljs (54)
- # sql (9)
- # testing (11)
- # tools-deps (15)
- # xtdb (14)
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!)