Fork me on GitHub
#shadow-cljs
<
2022-04-10
>
chromalchemy02:04:06

When I require clojure.string my bundle size my bundle size jumps up 2mb. Is that normal? ( :target :npm-module ,release build, then bundled w webpack 1.15.0 ) And the bundle.js is no longer minified.

chromalchemy03:04:27

My build report says the cljs should only be about 1mb I think something in cljs is tripping up the webpack build so it ceases to minify results? I do get a smaller bundle and minified bundle.js with only a few cljs test fns. Currently I am not requiring any cljs libs (only some js ones that reside in node_modules folder). And still getting large bundle.

thheller05:04:04

@chromalchemy do you use the default :advanced optimizations or did you change it to :simple? do you do an actual shadow-cljs release build or just a webpack release build? did you configure webpack to inline source maps? many factors can lead to large builds, need more info to comment further.

chromalchemy13:04:53

I tried turning off source maps by removing devtool: 'source-map' in webpack.conf.js. Also tried devtool: 'hidden-source-map'``. I am doing a shadow-cljs release code, then run the webpack release build. The cljs is compiled/minified. But something is keeping the webpack build from finishishing it’s process I think. Maybe too old a version of weback. But I have been reluctant to upgrade in fear of breaking legacy js code.

chromalchemy13:04:34

Should i use :`:optimizations :advanced` explicitly?

thheller13:04:38

no, thats the default

chromalchemy13:04:26

Googling around I saw a hint that maybe ESLint errors are influencing webpack process… will have to test that.

thheller13:04:17

I really cannot comment on any of the webpack bits. you can easily check the size of the generated shadow-cljs output via the :output-dir. just make sure you ignore .map files

thheller13:04:38

should be reasonable and clojure.string definitely won't be contributing much overall

chromalchemy13:04:00

Ignoring the cljs-runtime and node modules folders in output?

thheller13:04:56

uhm what are you outputting to?

thheller13:04:33

you said this is a :npm-module build? it shouldn't have any of thsoe?

chromalchemy13:04:37

:output-dir "node_modules/shadow-cljs"

thheller13:04:09

well just temporarily change that to an empty folder

thheller13:04:13

makes it easier

chromalchemy14:04:56

My code is only 120k! But what to the shims represent in terms of final bundle?

thheller14:04:30

basically require("bigcommerce/stencil_utils")

thheller14:04:37

and require("jquery")

thheller14:04:07

ie. your inclusion of the npm packages that webpack will provide

chromalchemy14:04:41

instead of ?

(:require
    ["@bigcommerce/stencil-utils" :as utils]
    ["jquery" :as jq]
    [clojure.string :as string])

thheller14:04:24

what do you mean instead of?

thheller14:04:33

those are responsible for creating the shims yes

thheller14:04:49

for :npm-module builds shadow-cljs doesn't bundle any npm dependencies at all

thheller14:04:58

webpack will do so when you run it through webpack

thheller14:04:05

otherwise you'd end up with them duplicated

chromalchemy14:04:04

Ok I think thats what I was trying to clarify. These js deps will not be included in the shadow-cljs output (just the shim reference)

chromalchemy14:04:06

and I shouldnt need to do any $default stuff in the require?

chromalchemy14:04:39

related, maybe.. Is this still the best way to require cljs code from js?

var clj = require("shadow-cljs/gbo.mycljs");

thheller14:04:26

I don't understand what you are asking anymore. in the beginning this was about build size. now you are asking about the require?

thheller14:04:51

yes, this is the way you include this code in a webpack build.

thheller14:04:28

you have the size of the CLJS code you include. if the webpack output is much larger then that is coming from your JS code and the included dependencies

chromalchemy14:04:37

Sorry, you have helped me confirm that my shadow-cljs build size is indeed very reasonable.

😅 1
chromalchemy14:04:49

Thanks! Just wanted to make sure I was calling it correctly.. one last question. I also have this in my js file, not sure where it came from. Do you recognize it? import { clj__GT_js } from 'shadow-cljs/cljs.core';

chromalchemy14:04:26

And thank you for your help (and shadow-cljs). It’s pretty cool that I am able to surgically refactor functions into cljs inside this older theme code and it’s particular stack

thheller14:04:40

I don't know where it came from. I didn't write your JS code 😉

chromalchemy14:04:10

True, must have been when I was trying to get cljs-devtools loading. (..never did get it working, but was able to get along pretty well with pprint)

thheller14:04:07

just if (process.env.NODE_ENV === "development") { require("shadow-cljs/devtools.preload"); } in your JS might work

Ho0man15:04:10

Hi everyone, I wanted to use separate base_url addresses during dev and release. Is there any best practice to do that ? I found something https://shadow-cljs.github.io/docs/UsersGuide.html#shadow-env but could not figure out how to access the set variable in the code Thanks a lot

thheller15:04:36

what is a base_url?

Ho0man15:04:31

The url that all the calls to the web API should be directed at, for instance.

Ho0man15:04:15

in dev its "localhost:8280" or something but when releasing this should be ""

thheller15:04:52

those are the relevant sections I guess

thheller15:04:23

or if you generate your HTML in some way just put the urls to use in there and get it at init time in your code