{"id":16014878,"url":"https://github.com/thheller/code-splitting-challenge","last_synced_at":"2025-07-02T21:05:06.009Z","repository":{"id":140236649,"uuid":"187020644","full_name":"thheller/code-splitting-challenge","owner":"thheller","description":null,"archived":false,"fork":false,"pushed_at":"2019-05-16T12:11:18.000Z","size":5,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-02T21:04:35.501Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thheller.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-16T12:10:56.000Z","updated_at":"2019-05-16T12:48:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"b8f07a8b-f425-4da8-b247-53001b5abd39","html_url":"https://github.com/thheller/code-splitting-challenge","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"03b46c2ca3015891930cf3b27b5a51c1efc68b14"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thheller/code-splitting-challenge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thheller%2Fcode-splitting-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thheller%2Fcode-splitting-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thheller%2Fcode-splitting-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thheller%2Fcode-splitting-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thheller","download_url":"https://codeload.github.com/thheller/code-splitting-challenge/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thheller%2Fcode-splitting-challenge/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263215288,"owners_count":23431893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-08T15:05:24.297Z","updated_at":"2025-07-02T21:05:05.968Z","avatar_url":"https://github.com/thheller.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Code Splitting ClojureScript\n\nThis is a slightly modified [Code Splitting ClojureScript](https://code.thheller.com/blog/shadow-cljs/2019/03/03/code-splitting-clojurescript.html) example meant to demonstrate a \"common\" code-splitting scenario where a couple modules exist and each may depend on others.\n\nIn this scenario the `:product-detail` module/chunk depends on the `:product-listing` which in turn depends on `:main`. `:product-detail` has a dependency on `react-select` and a shared dependency on `react-table` which `:product-listing` also uses. These are just examples and the packages aren't actually used in the code. The point is that `react-table` should be loaded as part of the `:product-listing` package and `react-select` as part of `:product-listing`.\n\n## Want a Challenge?\n\nWhen initially building the `npm` intergration for `shadow-cljs` based on `webpack` this was scenario that provided the most difficulty. This is not a theoretical scenario, it was taken out of an actual app (although with different packages). I'm sure this is possible somehow and might have gotten easier with newer `webpack` versions but I was not able to get this running properly where things were chunked in an accurate fashion. The goal is to keep as much code as possible out of the `:main` module since that will always be loaded first.\n\nThe example code is still kind of tiny but demonstrates well why code-splitting is especially important when adding 3rd party npm libraries (ie. `react-select` adds over 112kb on its own, not including the other dependencies it brings with it).\n\nI'd be extremely curious to see a solution that achieves a similar split using `webpack` + CLJS.\n\n## Building\n\nYou can compile it by cloning the repo and running\n\n```\nnpm install\nnpx shadow-cljs watch app\n;; or\nnpx shadow-cljs release app\n\n;; generate a build report via\nnpx shadow-cljs run shadow.cljs.build-report app report.html\n\n;; then open report.html in the browser\n```\n\nand then open http://localhost:8000.\n\nThe demo is hosted here:\n- https://code.thheller.com/demos/code-splitting-challenge/\n\nThe sample build report is available here:\n- https://code.thheller.com/demos/code-splitting-challenge/report.html","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthheller%2Fcode-splitting-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthheller%2Fcode-splitting-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthheller%2Fcode-splitting-challenge/lists"}