cljsjs/antd pulls in the whole of antd

[gmp26]

Do let me know If there's a more appropriate channel to discuss user issues.

I'm starting from a leiningen project with the following dependencies:

  :dependencies [[org.clojure/clojure "1.9.0-alpha16"]
                 [org.clojure/clojurescript "1.9.908"]
                 [antizer "0.2.2"]
                 [rum "0.10.8"]
                 [cljs-css-modules "0.2.1"]
                 [cljsjs/antd "2.12.3-0"]
                 [cljsjs/moment "2.17.1-1"]
                 [figwheel-sidecar "0.5.13"]]

which provokes the startup warning:

antd.inc.js:sourcemap:45118 You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

Does this mean that it would be better to avoid using cljsjs/antd and somehow build antd using webpack and babel-plugin-import? If so, perhaps some documentation on this would be useful.

[vspinu]

Looking for a solution for this as well. The official instructions on how to use babel plugin are rather un-helpful for the use with antizer.

[jiacai2050]

Could someone give some tips on how to solve this problem?

[bzg]

Sorry I can't help, but just wanted to chime in to say I'm also interested in the solution!

[jiacai2050]

After setting optimizations to advanced, the warning disappear. So I think it has no effect in production.

[vspinu]

And how big is your final js file?

[jiacai2050]

The uncompressed JS is 1.2M, After gzip, It is only 479K.

[wpcarro]

@gmp26 I am curious as to why you have [cljsjs/antd "2.12.3-0"] in your :dependencies. I am trying to get started with antd and ClojureScript myself, but I cannot seem to find anywhere in the readme that mentions this step.

That said, I cannot manage to get my styles working. Referencing cljsjs/antd/development/antd.inc.css in my index.html just gives me a 404.

I have tried searching including [cljsjs/antd "2.12.3-0"] in my project.clj (after seeing your issue), and the 404 persisted.

Is the recommended solution to extract the .css file from the .jar that is stored in ~/.m2 and copy it to your ClojureScript project? I'm okay with that, as long as that is the recommended solution. I haven't seen anything in the documentation recommending this though, so I'm a bit skeptical.

[gmp26]

@wpcarro. The honest answer is I don't now know why I had [cljsjs/antd "2.12.3-0"] in there. I see that the current readme acknowledges cljs/antd but does not suggest adding it as a dependency. I ran out of time trying to understand the nuances of using antizer with clojurescript so am no longer using antizer. Maybe another project another day....

[jiacai2050]

@wpcarro In quick start, it says to include css using CDN, so I think you can just ignore cljsjs/antd.

[teesloane]

@jiacai2050 can you link to where you would be making the optimizations change...

I wonder if this is the google closure compiler in action? Will keep my eye on this.

[jiacai2050]

@teesloane Nothing required, just set optimizations to advanced.

[teesloane]

@jiacai2050 -- in the project.clj? (I'm still learning about the build processes on the clj ecosystem)

[jiacai2050]

Yes.
Take a look at this.

[teesloane]

Interesting. @jiacai2050

I created a test.

I made a re-frame project and added antizer. I rendered a button like so:

(ns redemo-antizer.views
  (:require [re-frame.core :as re-frame]
            [redemo-antizer.subs :as subs]
            [antizer.reagent :refer [button message-info]]
            ))

(defn main-panel []
  (let [name (re-frame/subscribe [::subs/name])]
    [button {:on-click #(message-info "Hello Reagent!")} "Click me"]))

I ran lein clean && lein cljsbuild once min to export a js file. It is 1.5 mb.

---

Then I used create-react-app to do the same thing (as per antd docs). Bundle size is 157kb when using the antd babel plugin import.

It re-frame + clojurescript + react really adding an extra 1.4 mb? I know it seems pedantic and unnecessary to be squabbling over this, but beyond getting smaller builds, I'd also like to make sure that I'm understanding how to use namespaces and the google closure compiler correctly

[priornix]

The babel-plugin-import is developed for the JavaScript ecosystem. Hence, we can't get it to work in ClojureScript without creating or porting it over.

Using closure with advanced optimizations helps reduce the bundle size, but it is not as optimal as using babel-plugin-import since the latter only includes the relevant code. Of course, manually building antd using babel-plugin-import can be done, but it can be error-prone, since you could potentially leave out certain classes.

Just a poll, how many users of antizer are interested in a ClojureScript only solution?

[gmp26]

I'm back to using antizer in an electron project where it is performing well. I'm possibly not so memory sensitive in this context, though I am still pulling in the whole of antd.

I'd love to avoid a babel build!

[gmp26]

Shadow-cljs helps with js code, but it's hard to avoid pulling in 500K of SVG icons since these are referenced through attributes. e.g. (ant/button {:icon "download"}).

See this gist: https://gist.github.com/gmp26/b01daec3df146dd5aff67d3b615d4cc6

And here's a shadow build report where I only required antd/es/button: