So your distill numbers, you put in the same app code numbers for each, and the difference coming out was 120k of minified code? That is a lot. What were your numbers and we will see what is causing the difference.
So I collate all the distill numbers across my all games using a python script. It pops out these:
21 28 22 1 50.44 6.1 50.5 50.435 50.34 10 17.6 12 50.432 47.5 7 59 50.6 50.7 7.5 47.6 34.85 50.8 13.5 9 41.5 13.45 50 48.1 40 52 50.97 48 41.55 41.97 54 27.66 27.6 27.5 55 41.1 41.7 41.95 69.9 47.7 33.15 9.8 11.7 30 45.3 6 18 20 19 35 45 11.5 17 9.7 13.46 7.8 66.5 45.5 13.61 41.64 13.2 41.71 50.1 8 31 34 56 27.68 41.2 36 41.63 32 45.12 83.3 83.35 83 9.99 83.36 41.8 53 27.65 51 41.6 39 13.32 45.22 53.2 81.5 81.6 47.8 47.87 13 13.1 27.8 13.3 27.7 13.47 13.34 13.4 53.15 14 27.9 47.88 69.972 33.16 33.165 53.5 13.466
Using the above numbers...
// ZIM - https://zimjs.com - DISTILLED NON-MINIFIED (570.7 KB) cat/04/ZIM
// ZIM - https://zimjs.com - DISTILLED NON-MINIFIED (737.1 KB) 019/ZIM
So a lot of dependencies must have been added to the parts of ZIM that I've used.
Sorry, @Chris_S - lost the thread on this one.
Here is a diff test on these two. I just scanned it quickly and cannot quite tell - did not see individual classes that have been added - it seems like just lots of additions to the classes there. But did not look closely enough. Maybe AI can tell faster.
https://www.diffchecker.com/qm5qjBRI/
Will see if I can get it to analyse.
Asked Claude: what new classes or methods have been added from the first file to the second file? And how many bytes are in each. Also, list the top 20 classes or functions that are in both files ordered by the most changes and list the bytes or kb of the changes.
| Rank | Class / Function | Approx. Change |
|---|---|---|
| 1 | Frame | ~65 KB added -” pointer events, cursor system, ready/ticker params, loadAssets overhaul, format detection, keyboardMessage, blur detection |
| 2 | Blob | ~45 KB added -” splitBlob, makeSquiggle, reversePoints, splitPoints, selectPoint, removePoint, stickThickness, circleColor params, SVG string support |
| 3 | Squiggle | ~40 KB added -” makeBlob, appendPoints, reversePoints, splitPoints, removePoint, selectPoint, stickThickness, circleColor, traverse rework |
| 4 | animate | ~35 KB added -” startCall, animateCall, sequenceRatio, rewindPick, noAnimateCall, pathDamp, Timeline-style percentComplete, latestTween, style param |
| 5 | Tile | ~30 KB added -” per-cell backgrounds, backdropColor, mat, scaleToH/V, variable spacing arrays, setSpacing, setProps, remake overhaul |
| 6 | Button | ~20 KB added -” full 3-state system (normal/roll/down), downBacking, downIcon, downColor, downBorderColor, autoPadding, width=auto |
| 7 | Bitmap | ~18 KB added -” keyOut, removeGreenScreen, addBitmapData, color flood fill, getColorAt array return, scale param, cacheScale |
| 8 | Emitter | ~15 KB added -” warm/doWarm, focusWarm, variable life per particle, Sprite frame randomization, improved pooling |
| 9 | drag | ~15 KB added -” axis param, dropTargets/dropCopy/dropSnap/dropBack/dropEnd/dropFull/dropHitTest/dropScale, circle boundary, List drop support, dropOriginal |
| 10 | Container | ~12 KB added -” sortBy(), normalize(), getBounds(targetSpace), setBounds normalization, cache adjustBounds option, backdropColor |
| 11 | Sprite | ~10 KB added -” JSON hash/array/XML format auto-detection, randFrame, run improvements, single frame support |
| 12 | Label | ~8 KB added -” lineHeight setter, paddingH/V rename, colorOnly, labelHeight fixes, italic background skew |
| 13 | loop | ~7 KB added -” interval async looping, immediate param, complete/completeParams, collapse, Dictionary loop support |
| 14 | getStyle / styleTransforms | ~7 KB added -” groupOnly, lazy group detection, DIR RTL, shadow, cursor, noMouse, siz, uppercase, tap/change/hold style support |
| 15 | series | ~6 KB added -” flip(), mix(), random(), shuffle(), recursive Pick inside series, length property |
| 16 | convertColor | ~6 KB added -” hsl conversion, 8-digit hex, hexstring type, array return, number input |
| 17 | pos | ~5 KB added -” DIR RTL start/end support, add:false fix, zimPos tracking |
| 18 | CheckBox | ~5 KB added -” rtl param, PICK support for label/startChecked, layout fixes |
| 19 | Ticker | ~4 KB added -” isUpdating(), getFPS(), mID/tether params throughout, pointer-based leftEvent |
| 20 | specialColor | ~4 KB added -” angle-based gradient support, auto-bounds for radial/linear, full rewrite of gradient logic |
Unfortunately did not add sizes - and my tokens are up for the day. I guess it was a pretty big job ;-).
New classes:
| Class | Notes |
|---|---|
| ZIM.Point | Extended from createjs.Point with degree-based angle() and project() |
| ZIM.SVGContainer | SVG path processing |
| ZIM.Dat | XML/data parser |
| ZIM.Flare | New shape type |
| ZIM.MultiEffect | Hue/saturation/brightness/contrast filter |
| ZIM.GradientColor | Gradient color with angle support |
New methods and funcitons:
| Method | Notes |
|---|---|
| ZIM.browserScrollX / Y | Replaces old scrollX / scrollY |
| ZIM.scrollX / scrollY | Renamed to browserScroll internally |
| ZIM.arraysEqual | Array comparison |
| ZIM.arrayMinMax | Get min/max of an array |
| ZIM.reversePoints | Reverse Blob/Squiggle points |
| ZIM.appendPoints | Append points to a path |
| ZIM.prependPoints | Prepend points to a path |
| ZIM.splitPoints | Split a path at an index |
| ZIM.trimPointEnds | Trim point handle ends |
| ZIM.transformPoints | Transform Blob/Squiggle points |
| ZIM.getPointAtPercent | Get point along a line at percent |
| ZIM.svgToBitmap | Convert SVG to Bitmap |
| ZIM.setProps | Set properties on array of objects |
| ZIM.isPick extended | Now handles noPick passthrough |
| ZIM.ggo / zgo | URL navigation helper |
| ZIM.zum | Parse pixel values (parseInt on CSS) |
| ZIM.zimEase | Custom ease curve generator |
| ZIM.getStyle groupOnly | New parameter for group-only style lookup |
| ZIM.Pick.getMinMax | Get min/max from ZIM VEE |
| series().flip() | New bounce variant on series |
| series().mix() | Shuffle avoiding last value |
| series().shuffle() | Shuffle array |
| series().random() | Random mode |
| Container.sortBy() | Sort children by property |
| Container.normalize() | Normalize children positions/ratios |
| Blob.splitBlob() | Split blob into two blobs |
| Blob.makeSquiggle() | Convert Blob to Squiggle |
| Squiggle.makeBlob() | Convert Squiggle to Blob |
| Squiggle.removePoint() | Remove point at index |
| Blob.removePoint() | Remove point at index |
| Squiggle/Blob.selectPoint() | Programmatically select a point |
| Squiggle/Blob.reversePoints() | Reverse point order |
| Squiggle.appendPoints() | Append points |
| Squiggle.splitPoints() | Split into two Squiggles |
| Bitmap.keyOut() | Color keying (chroma key) |
| Bitmap.removeGreenScreen() | HSL-based green screen removal |
| Bitmap.addBitmapData() | CreateJS BitmapData support |
| Bitmap.color() | Flood fill color |
| Sprite JSON hash/array format support | Phaser/TexturePacker format auto-detection |
| Frame ready callback parameter | Direct function parameter |
| Frame ticker callback parameter | Ticker function in Frame constructor |
| Frame.keyboardMessage() | Iframe keyboard access helper |
| Frame.cursorList + cursor system | Full custom cursor management |
| Frame pointer events | Full pointer event system added |
| Frame.reloaded | Detect page reload |
| Emitter warm / doWarm | Pre-warm particle system |
| Emitter focusWarm | Re-warm on tab focus |
| Tile scaleToH/V/Type | Scale items to fit cells |
| Tile backgroundColor / backing per cell | Per-cell backgrounds |
| Tile backdropColor | Overall tile backdrop |
| Tile mat | Mat/overlay for tile |
| Tile setSpacing() | Dynamic spacing update |
| Tile setProps() | Set properties on all items |
| Tile variable spacing (arrays) | spacingH/V can now vary per gap |
| Button downBackgroundColor | Third state (pressed) color |
| Button downBacking/Icon | Third state visuals |
| Button.wait() | Programmatic wait trigger |
| CheckBox rtl parameter | Right-to-left support |
| Label paddingH/V renamed | (were paddingHorizontal/Vertical) |
| Label lineHeight setter | Dynamic line height |
| ZIM.hov() | Hover shortcut method |
| ZIM.dye() | Color tint method |
| ZIM.blendmodes() | Cycle blend modes |
| ZIM.ble() | Blend mode shortcut |
| ZIM.change() / noChange() | Change event helpers |
| ZIM.noTap() | Remove tap events |
| ZIM.hitTestRectPoint() | Hit test rect vs point |
| ZIM.hitTestCirclePoint() | Hit test circle vs point |
| zimify bounds params a,b,c,d | Can now auto-set bounds |
One question... why is Flare in there. That is a pretty big class - I will check to see, maybe there is a duplicate distill number for it.
OH - the new classes listed are mostly not in there - they are just references in the included code but were never activated so distill does not pick them up.
There are actually 126 ZIM entries in the Cat version and 127 ZIM entries in the 019 version. So... that is good. I do not know what the new one is in ZIM but it can't be that bad. So, to me, it looks like the difference in size is additions to the existing classes. We will have a look at the leading ones there... Frame, Blob, Squiggle, Animate, Tile, etc. but I bet there will not be too much we can do about it.
Almost 300k for the top 10. That is about 22k g-zipped.
Was the Bitmap library added, and isn't that quite large? I seem to remember looking at that and wondering why it wasn't an optional external library.
To be honest, I've been on an epic journey the last couple of months. I have created a minimal, modular framework with zero dependencies. It includes the typical scene graph features. But I've also added a Lottie style animation module which supports your typical transformations as well as awesome path deformation, spatial motion animations, programmatic modifiers, the list goes on. I also made a visual "Morph Editor" tool with scrubbable play head on the timeline.
The upshot, is that I'm using ZIM less than I was, and I have felt sadness about it as I've loved working with ZIM!
The current 420KB gzipped CreateJS + ZIM 019 combo, has been heading in a direction I wasn't comfortable with. Each recent releases have added some really cool new features, but they have generally been less useful for us. Compare this with my modern, opinionated framework which, including common game bootstrapping code with fullscreen and visibilitychange handling etc, is 29KB gzipped.
2 Likes