clojurescript 2023-03-08

Alex08:03:24

I'm struggling to properly import antd into a shadow-cljs/reagent project without creating a huge bundle. How I created the project:

lein new reagent-frontend test-app
...
npm i antd
npx shadow-cljs release app

How I imported the component:

(ns test-app.core
    (:require
      [antd :refer (Button)]
      [reagent.core :as r]
      [reagent.dom :as d]))

;; -------------------------
;; Views

(defn home-page []
  [:div (Button [:h2 "Welcome to Reagent"])])

Removing Button from this reduces the size of my bundle from ~~3MB to~~ 200KB. I tried several ways of importing the module/component but all had the same effect. Is it possible to only import the required code into my project?

thheller08:03:31

antd is huge when imported that way. check the build report for a detailed breakdown https://shadow-cljs.github.io/docs/UsersGuide.html#build-report

thheller08:03:17

avoid importing the root antd package. instead try (:require ["antd/lib/button" :as Button])

thheller08:03:31

might be ["antd/lib/button$default" :as Button]

Alex08:03:52

@U05224H0W The build report lists all antd components, like the icons and dependencies. I tried following your GitHub comment (https://github.com/thheller/shadow-cljs/issues/412#issuecomment-442002374) to only import the Button component, but I couldn't figure out a syntax. I will try your two suggestions

Alex08:03:30

That did cut the bundle size down to 500k. Hmm. Thank you for your help

Alex08:03:27

Just tried a fresh cra project and imported the button. It's about half the size as the shadow-cljs project

Alex08:03:28

with npm create-react-app: 231K Mar 8 03:44 main.c3d1f8f5.js

Alex08:03:04

with lein new reagent-frontend test-app / shadow-cljs: 501K Mar 8 08:30 public/js/app.js

Alex08:03:49

that's quite a big package still

thheller08:03:44

check the build report is all I can say. it will show you exactly what is what

Alex08:03:59

I'm waiting for it to generate rn to check again

thheller08:03:20

if you want better tree shaking for npm packages I suggest you stick with webpack as described here https://code.thheller.com/blog/shadow-cljs/2020/05/08/how-about-webpack-now.html#option-2-js-provider-external

thheller08:03:20

that cleary is mostly npm stuff?

Alex08:03:26

@U05224H0W Thanks, I'll try the webpack approach and see if that gives me any extra juice

thheller08:03:38

yes, clojurescript itself is about 23% and that is about the baseline you'll get

thheller08:03:50

but even react-dom itself is larger

thheller08:03:33

remember that cljs.core alone basically is something like immutable-js + lodash in one

thheller08:03:56

so if you do comparisons with plain js consider added those to make the comparison fair

thheller08:03:08

you won't get much smaller with webpack for this particular build

Alex09:03:02

well considering the additional 116 KB of cljs/core, there's still an additional 154 KB being brought in from npm with shadow-cljs compared to the barebones Button example in basic create-react-app

Alex09:03:24

I'm trying the webpack link now

Michaël Salihi16:03:36

There is also this wrapper that you can use or just to take a look the optimal way to import. https://gitlab.com/synqrinus/syn-antd

Alex08:03:53

(Sorry if this should be a question for #C053AK3F9 or another channel)

DrLjótsson12:03:08

Hey, anyone using tick? Docs say that one can reduce cljs build size by including smaller timezone packages from js-joda. But they don't say where these packages are available or how I actually use them. Any ideas? https://github.com/juxt/tick/blob/master/docs/cljs.adoc

thomas12:03:57

maybe ask in #C0CFGN25D?

DrLjótsson12:03:14

Oh yeah, thanks!

rolt14:03:04

hello, I'm having trouble using regexp unicode in cljs: (re-matches #"(?u)\p{Alpha}" "a") => works (re-matches #"(?u)\p{Hex_Digit}" "a") => error Unknown character property name {In/IsHex_Digit} near index 16 in the JS console: 'a'.match(/\p{Hex_Digit}/u) => works anyone knows what I'm missing ?

p-himik16:03:52

CLJ-hosted CLJS compiler first reads all CLJS forms and then converts them into JS code. That means that the #"..." dispatch macro will first be read by a CLJ reader and not a CLJS one. So that RegEx will be read as java.util.regex.Pattern. And that's exactly the class that spits that error - it doesn't support Hex_Digit.

p-himik16:03:01

You can move pattern preparation to runtime by calling re-pattern on a plain string instead. It will avoid Java's Pattern altogether.

rolt20:03:29

thanks ! now it makes sense

clyfe14:03:46

What's a good, recent, bare bones (cljs+nrepl) cljs project template? No figwheel, no bells. I'm trying to get a cljs+nrepl+calva combo working nicely and kinda failing.

skylize14:03:37

https://github.com/PEZ/shadow-bare-bones - @U0ETXRFEW

pez14:03:44

I guess shadow-cljs can be considered bells. 😃 But Calva has a Getting Started REPL for cljs, which creates a very small project and jacks in to it. This project is created in a temp directory. It's being downloaded from here: https://github.com/BetterThanTomorrow/dram/tree/published/drams

👍 2

hifumi12320:03:16

The most barebones I can think of is starting with a single folder with a single empty deps.edn file inside and running CIDER with :node-repl

hifumi12320:03:46

This is what I do whenever I want a clojurescript REPL and absolutely nothing else, but you can always modify the deps.edn file to add libraries and fancy things later

2023-03-08

Channels