This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-10-25
Channels
- # announcements (22)
- # babashka (9)
- # beginners (33)
- # biff (12)
- # calva (17)
- # cider (64)
- # cljdoc (3)
- # cljfx (16)
- # clojure (125)
- # clojure-bay-area (14)
- # clojure-europe (15)
- # clojure-norway (64)
- # clojure-uk (2)
- # clojurescript (7)
- # conjure (1)
- # core-async (4)
- # cursive (6)
- # data-science (14)
- # datahike (8)
- # datomic (6)
- # defnpodcast (4)
- # emacs (5)
- # events (1)
- # hyperfiddle (15)
- # leiningen (17)
- # lsp (8)
- # membrane (27)
- # off-topic (25)
- # podcasts-discuss (4)
- # polylith (6)
- # portal (21)
- # reagent (11)
- # releases (1)
- # shadow-cljs (36)
- # slack-help (2)
- # sql (1)
- # squint (131)
- # testing (12)
- # xtdb (7)
I am questionning myself if I am using webpack correctly, more precisely the entry of my webpack config.
I am generating my entry file in my shadow-cljs.edn :
(the entry file is :external-index "target/external.js"
)
{:nrepl {:port 8776}
:deps true
:builds {:module {:target :npm-module
:output-dir "out"
:output-to "out/metavrs.js"
:entries [sdk.core]}
:app {:target :browser
:output-dir "resources/public/js/compiled"
:asset-path "js/compiled"
:modules {:app {:entries [sdk.core]
:init-fn sdk.core/main}}
:js-options {:entry-keys ["module" "browser" "main"]
:js-package-dirs ["node_modules"]
:js-provider :external
:external-index "target/external.js"
:external-index-format :esm}
:compiler-options {:infer-externs :auto
:output-feature-set :es-next}
:release {:compiler-options
{:optimizations :simple
:output-feature-set :es-next}}}}
:dev-http {8291 {:root "resources/public/"}}}
I will send how my external.js file looks like in the reply section to not pollute the conversation here with code.external.js :
import * as i0 from "three-spritetext";
import * as i1 from "three/examples/jsm/postprocessing/BokehPass.js";
import * as i2 from "wagmi";
import * as i3 from "three/examples/jsm/postprocessing/SAOPass.js";
import * as i4 from "react-dom/client";
import * as i5 from "three";
import * as i6 from "three/examples/jsm/libs/lil-gui.module.min.js";
import * as i7 from "three/examples/jsm/postprocessing/RenderPass.js";
import * as i8 from "three-stdlib";
import * as i9 from "wagmi/chains";
import * as i10 from "@web3modal/wagmi/react";
import * as i11 from "three/examples/jsm/libs/stats.module.js";
import * as i12 from "react";
import * as i13 from "three/examples/jsm/postprocessing/ShaderPass.js";
import * as i14 from "three/examples/jsm/postprocessing/EffectComposer.js";
import * as i15 from "ethers";
import * as i16 from "regenerator-runtime";
import * as i17 from "tweakpane";
import * as i18 from "three/examples/jsm/postprocessing/SMAAPass.js";
import * as i19 from "@wagmi/core";
import * as i20 from "camera-controls";
import * as i21 from "three/examples/jsm/shaders/GammaCorrectionShader.js";
const ALL = {};
globalThis.shadow$bridge = function(name) {
const ret = ALL[name];
if (ret == undefined) {
throw new Error("Dependency: " + name + " not provided by external JS!");
} else {
return ret;
}
};
ALL["three-spritetext"] = i0;
ALL["three/examples/jsm/postprocessing/BokehPass.js"] = i1;
ALL["wagmi"] = i2;
ALL["three/examples/jsm/postprocessing/SAOPass.js"] = i3;
ALL["react-dom/client"] = i4;
ALL["three"] = i5;
ALL["three/examples/jsm/libs/lil-gui.module.min.js"] = i6;
ALL["three/examples/jsm/postprocessing/RenderPass.js"] = i7;
ALL["three-stdlib"] = i8;
ALL["wagmi/chains"] = i9;
ALL["@web3modal/wagmi/react"] = i10;
ALL["three/examples/jsm/libs/stats.module.js"] = i11;
ALL["react"] = i12;
ALL["three/examples/jsm/postprocessing/ShaderPass.js"] = i13;
ALL["three/examples/jsm/postprocessing/EffectComposer.js"] = i14;
ALL["ethers"] = i15;
ALL["regenerator-runtime"] = i16;
ALL["tweakpane"] = i17;
ALL["three/examples/jsm/postprocessing/SMAAPass.js"] = i18;
ALL["@wagmi/core"] = i19;
ALL["camera-controls"] = i20;
ALL["three/examples/jsm/shaders/GammaCorrectionShader.js"] = i21;
I am asking myself if there is a more optimize way to do this because as you can see in my external.js
(the entry point of my webpack) there's a lot of import all which can increase the size of my bundle with stuff I don't even need....
I've tried the terserPlugin
in my webpack but it does nothing...
optimization: {
minimize: true,
usedExports: true,
minimizer: [
new TerserPlugin(),
],
},
if you do a npx shadow-cljs release app
build the external index will look much different, and it will let webpack optimize it much more
compile/watch are development builds, where size doesn't matter. so the index just imports everything and webpack can't optimize that. when looking at build sizes only use release
builds
@U05224H0W thanks man, it helped me !