boot-clj / boot-cljs

Boot task to compile ClojureScript programs.
Eclipse Public License 1.0
176 stars 40 forks source link

Code-splitting doesn't work without a .cljs.edn file ? #183

Closed DjebbZ closed 5 years ago

DjebbZ commented 6 years ago

Code-splitting bug with boot-cljs

Goal:

Use code-splitting to wrap an Closure js lib defined under :libs as a CLJS split, so that I can lazy-load it. Think trackers like Google analytics etc. that don't need to be loaded first. The goal is to reduce the Time-to-Interactive.

Steps to reproduce:

  1. git clone https://github.com/DjebbZ/code-splitting-bug-boot-cljs.git
  2. cd code-splitting-bug-boot-cljs
  3. boot dev
  4. Visit http://localhost:3000 and open the browser devtools.

Expected:

The main file (js/app.js) is loaded, then the split. All modules loading should be logged in the browser console.

Actual:

The main file isn't loaded because it doesn't exist! So nothing works.

Notes:

The code is based on the Tenzing Clojurescript template. The relevant dependencies have been updated to the latest version: ClojureScript and Boot-cljs. It uses the .cljs.edn file, located in resources/js/app.cljs.edn. Also, I've read carefully #174 in hope it would help me but unfortunately it doesn't.

Maybe I did something wrong, but based on the discussion in #174 it seems there's really a bug here. I created the repository to ease the bug fixing.

Thanks for taking a look!

Deraen commented 6 years ago

I think the problem is that js/app.js is not even supposed to exist because that is path for output-to, but that option doesn't have effect when using module splitting. The main code will be written to cljs_base module, as you haven't defined other modules which would include the app namespace. So try loading js/app.out/cljs_base.js instead.

Alternative, you should be able to change the module output path by adding :cljs-base {:output-to "js/app.js"} to :modules value.

DjebbZ commented 6 years ago

Indeed, I forgot about :cljs-base. I fixed it and it worked. Thanks.

But it wasn't the bug I wanted to reproduce. I finally managed to, just visit my repo. The bug is when I don't use a .cljs.edn.

To avoid messing with the discussion history I'm gonna re-paste the updated README below :

=============

Code-splitting bug with boot-cljs with NO .cljs.edn file

Goal:

Use code-splitting to wrap an Closure js lib defined under :libs as a CLJS split, so that I can lazy-load it. Think trackers like Google analytics etc. that don't need to be loaded first. The goal is to reduce the Time-to-Interactive.

Steps to reproduce:

  1. git clone https://github.com/DjebbZ/code-splitting-bug-boot-cljs.git
  2. cd code-splitting-bug-boot-cljs
  3. boot dev
  4. Visit http://localhost:3000 and open the browser devtools.

Expected:

The main file (js/app.js) is loaded, then the split. All modules loading should be logged in the browser console. The track module should be loaded lazily after the cljs-deps module. The js/main.out/track.js file should contain the code compiled from src/cljs/code_splitting_bug_boot_cljs/tracking.cljs.

Actual:

Both cljs-deps and track modules are loaded instantly. The js/main.out/track.js file is empty. The js/app.js file contains the code of the track module whereas it shouldn't.

So the code works, but code-splitting doesn't.

Notes:

The code is based on the Tenzing Clojurescript template. The relevant dependencies have been updated to the latest version: ClojureScript and Boot-cljs. It does NOT uses a .cljs.edn file, all compiler options are in build.boot.

Thanks for taking a look!

DjebbZ commented 6 years ago

I've finally moved to using .cljs.edn files as this is what boot-cljs supports the best but I think it's still better to leave the issue opened as it's a bug.

DjebbZ commented 5 years ago

In fact I failed to do code-splitting one year, but I've just managed to do it for real the last few days. With a .cljs.edn file. This should be documented somehow I think.