cljs-react-material-ui icon indicating copy to clipboard operation
cljs-react-material-ui copied to clipboard

A la carte components -> reduce code size

Open skbach opened this issue 6 years ago • 3 comments

Is there any way to only include certain components from the library, or is it all or nothing?

For example, in material-ui, you can

import Button from 'material-ui/Button';

instead of

import { Button } from 'material-ui';

Will I need to build my own version using npm and include it manually to get this behavior?

skbach avatar Sep 21 '17 14:09 skbach

Alternatively eliminate dead code by compiling with :optimizations :advanced

njordhov avatar Sep 22 '17 23:09 njordhov

:optimzations :advanced does very little to help. Still results in a 1.4MB file before gzip, which is insanely huge, considering the rest of my stack (Clojurescript, React, Rum, Datascript) comes out to 1/6 that size, and those libraries are monsters as well. Icons and Components I'm not using remain in the file, probably because the library isn't Closure module aware?? Hence my idea of using rollup/webpack manually and then just including a script tag and externs.

skbach avatar Sep 25 '17 14:09 skbach

Solution for this is a new cljs feature :npm-deps, which allows to include npm packages directly and enables dead code elimination. But it's in first stages, still bit buggy, can't compile everything. I've been trying to compile material-ui, almost all good, but there few errors, that won't enable dead code elimination. I'm in contact with Antonio and working to resolve this.

Read more here: https://anmonteiro.com/2017/03/requiring-node-js-modules-from-clojurescript-namespaces/

madvas avatar Sep 25 '17 14:09 madvas