search

thi-ng / umbrella

⛱ Broadly scoped ecosystem & mono-repository of 199 TypeScript projects (and ~180 examples) for general purpose, functional, data driven development
https://thi.ng
Apache License 2.0
3.36k stars 149 forks source link

[examples] Switching from snowpack to vite #329

Closed postspectacular closed 2 years ago

postspectacular commented 2 years ago

As per this Twitter thread, I've updated all bundled examples to use Vite as new build tool for the foreseeable future. Even though Snowpack was a major improvement over the previous trialled bundlers (Parcel, WebPack) and served us well for 1.5 years, there have been some issues reported by some users, esp. in recent months, since switching all umbrella packages to ESM. Snowpack also had no real support for web workers, bundling was still done via webpack and there were a few other configuration quirks I wished I wouldn't have to deal with... Furthermore, Snowpack itself seems to be pretty unmaintained and already has been (quietly) superseded by the Astro toolchain, but that one feels too much of a departure for the needs of the examples in this repo...

Here're some outstanding tasks related to this switch:

Hello Vite...

So far Vite has provided a much better, faster, lighter out-of-the-box handling and losing Snowpack, Snowpack plugins and Webpack also means no more hundreds of Babel packages. The node_modules folder is now 80MB(!) lighter (still 220MB, though), but the drastically lower number of cruft in node_modules hopefully also means less Dependabot alerts for to take care of in the future (also considering Lerna is gone since landing #326)...

adopting the new build tool has another (IMHO) amazing outcome: All final example sizes are *drastically reduced (even further compared to recent savings due to using deep imports, see #315). The table below gives an overview of the size differences. The "ratio 1" column is the ratio of vite-produced pkg sizes compared to snowpack (both uncompressed). The "ratio 2" column expresses the filesize ratio of gzip'd vite outputs... The numbers speak for themselves!

id snowpack (KB) vite (KB) ratio (1) % vite gzip (KB) ratio (2) %
adaptive-threshold 101 50.4 49.9 18.6 36.9
async-effect 31 21.7 69.8 8.4 39.0
bitmap-font 61 28.8 47.3 11.0 38.2
canvas-dial 83 31.5 37.9 12.5 39.7
cellular-automata 22 19.6 89.0 8.1 41.1
color-themes 121 55.9 46.2 23.1 41.2
crypto-chart 113 50.9 45.0 19.8 38.9
devcards 30 20.3 67.7 7.9 39.1
dominant-colors 122 64.6 53.0 25.2 39.0
ellipse-proximity 100 34.4 34.4 13.9 40.4
fft-synth 171 65.7 38.4 25.3 38.5
geom-convex-hull 114 49.8 43.7 19.5 39.1
geom-fuzz-basics 140 48.9 34.9 18.8 38.6
geom-knn 121 47.2 39.0 18.3 38.7
geom-tessel 152 49.5 32.6 19.3 39.0
geom-voronoi-mst 132 69.6 52.7 26.2 37.7
gesture-analysis 158 56.7 35.9 22.4 39.4
grid-iterators 53 7.5 14.1 3.5 47.3
hdom-basics 15 13.7 91.4 5.7 41.7
hdom-benchmark 54 22.3 41.3 9.0 40.6
hdom-benchmark2 34 28.9 84.9 11.5 39.8
hdom-canvas-clock 68 31.5 46.3 12.6 40.0
hdom-canvas-draw 109 41.6 38.1 16.4 39.4
hdom-canvas-particles 115 41.3 35.9 16.3 39.5
hdom-canvas-shapes 178 69.0 38.8 26.8 38.8
hdom-dropdown-fuzzy 40 29.5 73.7 11.7 39.6
hdom-dropdown 34 23.0 67.7 9.0 39.1
hdom-dyn-context 28 18.1 64.6 7.1 39.5
hdom-elm 20 15.8 79.2 6.4 40.7
hdom-inner-html 15 14.0 93.3 5.8 41.7
hdom-local-render 56 20.9 37.4 8.4 40.0
hdom-localstate 16 15.2 95.2 6.2 40.8
hdom-skip-nested 15 14.3 95.4 6.0 41.8
hdom-skip 15 14.0 93.5 5.9 42.1
hdom-theme-adr-0003 17 16.6 97.5 7.0 42.0
hdom-toggle 17 15.4 90.4 6.4 41.8
hdom-vscroller 202 199.8 98.9 58.6 29.3
hiccup-canvas-arcs 137 48.0 35.0 19.0 39.6
hydrate-basics 31 20.6 66.4 8.4 40.9
imgui-basics 164 55.5 33.9 21.4 38.6
imgui 486 104.7 21.5 39.0 37.2
interceptor-basics 33 22.7 68.9 8.9 39.3
interceptor-basics2 33 23.1 69.9 8.9 38.7
iso-plasma 116 32.0 27.6 12.9 40.3
json-components 17 15.0 88.5 0.5 3.3
login-form 32 18.7 58.4 7.5 39.9
mandelbrot 76 30.2 39.7 11.9 39.4
markdown 93 27.2 29.3 11.0 40.5
multitouch 109 40.4 37.0 15.8 39.3
parse-playground 397 42.1 10.6 16.8 39.8
pixel-basics 46 16.8 36.6 6.5 38.4
pixel-dither 17.6 0.0 6.9 39.1
pixel-indexed 79 42.1 53.3 17.6 41.7
pixel-sorting 114 54.6 47.9 21.2 38.8
poisson-circles 115 34.6 30.1 14.1 40.6
poly-spline 151 55.3 36.6 21.7 39.2
porter-duff 46 16.9 36.7 6.6 38.9
ramp-synth 73 34.5 47.3 13.9 40.4
rdom-basics 58 22.7 39.1 8.9 39.4
rdom-delayed-update 53 17.8 33.7 7.2 40.5
rdom-dnd 353 17.4 4.9 7.3 41.9
rdom-lissajous 403 33.8 8.4 13.4 39.6
rdom-search-docs 68 25.8 37.9 10.0 38.9
rdom-svg-nodes 96 31.7 33.1 12.7 40.1
rotating-voronoi 178 75.3 42.3 29.1 38.6
router-basics 42 33.6 80.0 12.6 37.6
rstream-dataflow 70 37.7 53.9 14.5 38.3
rstream-event-loop 55 28.6 52.1 11.0 38.3
rstream-grid 130 56.8 43.7 21.7 38.3
rstream-hdom 57 25.3 44.4 9.9 39.1
rstream-spreadsheet 70 38.1 54.4 14.7 38.5
scenegraph-image 133 55.3 41.6 23.7 42.8
scenegraph 117 46.7 39.9 18.3 39.1
shader-ast-canvas2d 125 52.1 41.7 19.0 36.6
shader-ast-evo 126 44.8 35.6 17.3 38.5
shader-ast-noise 145 73.1 50.4 26.9 36.8
shader-ast-raymarch 146 74.7 51.2 27.4 36.7
shader-ast-sdf2d 145 73.0 50.4 26.7 36.5
shader-ast-tunnel 166 82.8 49.8 29.2 35.3
shader-ast-workers 94 14.3 15.2 5.7 39.9
shader-graph 141 65.6 46.6 23.7 36.1
soa-ecs 141 61.0 43.3 22.9 37.6
spline-tangent 107 27.5 25.7 11.6 42.2
stratified-grid 115 34.6 30.1 14.0 40.5
svg-barchart 18 16.6 92.0 6.8 41.1
svg-particles 20 14.9 74.3 6.3 42.2
svg-waveform 86 41.4 48.1 16.0 38.6
talk-slides 76 40.9 53.9 15.1 37.0
text-canvas-image 50 18.9 37.8 7.4 39.4
text-canvas 103 36.7 35.6 13.5 36.8
todo-list 31 22.4 72.4 8.5 38.0
transducers-hdom 56 24.4 43.5 9.6 39.4
triple-query 79 51.6 65.3 18.8 36.5
webgl-cube 137 55.3 40.4 21.4 38.8
webgl-cubemap 146 66.4 45.5 24.4 36.7
webgl-grid 137 65.0 47.4 24.4 37.5
webgl-msdf 169 85.0 50.3 31.0 36.4
webgl-multipass 136 61.2 45.0 21.8 35.6
webgl-shadertoy 120 33.6 28.0 13.0 38.7
webgl-ssao 157 78.5 50.0 29.0 36.9
wolfram 73 30.3 41.4 11.8 39.1
xml-converter 71 36.8 51.8 14.4 39.1