Fork me on GitHub
#clojurescript
<
2023-10-25
>
Alexandre EL-KHOURY09:10:51

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.

Alexandre EL-KHOURY10:10:15

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;

Alexandre EL-KHOURY10:10:56

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(),
        ],
    },

thheller10:10:29

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

thheller10:10:09

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

thheller10:10:03

also don't use :simple when you care abouy build size

Alexandre EL-KHOURY08:10:40

@U05224H0W thanks man, it helped me !