c4a8-web / shared-components

Storybook driven shared web components.
1 stars 1 forks source link

Bundling JavaScript for Jekyll #111

Closed cekageka closed 5 months ago

cekageka commented 5 months ago

Hi @Listor, wir hatten die Tage ganz kurz drüber gesprochen. Als ich beim Google-Debuggen gesehen habe, wie viele Roundtrips wir für mini-JS-files machen, hat mich das dann doch nochmal beschäftigt.

Jekyll kann eigentlich selbst recht pragmatisch bundlen:
https://cloudcannon.com/blog/bundling-javascript-for-jekyll/

Magst du dir dam ansehen? Wenn es keine große Sache ist, dann würde ich das für die Fälle die passen auf jeden Fall vorschlagen. Vielleicht läuft dann sogar der Build etwas schneller, CC muss ja dann nur noch das Bundle minimizen ;-).

Listor commented 5 months ago

Die vielen Requests sind in Http2 nicht so das Problem. Werde mir das bundling mit Jekyll aber ansehen, bzw. nochmal drüber nachdenken, wie man unkompliziert bundlen könnte.

Wenn ich das über Jekyll mache und nicht über Node, habe ich dann unterschiedliche Bundler für die Shared-Components und für die Jekyll Version.

Das bringt wieder eine potentielle Fehlerquelle mit sich, die ich gerne vermeiden würde.

cekageka commented 5 months ago

Hi Michi, das mit dem unterschiedlichen Bundler versteh ich nicht ganz bzw. mir ist nicht ganz klar, an welcher Stelle du potentielle Probleme siehst. Im Prinzip bleiben die Files ja untouched, es ist ja nur die Jekyll-Template-'Vereinfachung', dass innerhalb Jekylls nur noch auf ein File referenziert wird. Im Bereich CSS machen wir das meines Wissens ja auch schon mit Jekyll, siehe index.scss.

Listor commented 5 months ago

Das Problem ist die Pipeline in Node (Shared Components) benutzt z.b. Webpack um ein Bundle zu bauen. In Jekyll würden wir dann auch schauen, welcher Bundler das tun könnte. Der Vorschlag in dem Blog Eintrag ist meines Erachtens nicht praktikabel.

Wir können nicht einfach alle JS Dateien hintereinander konkatenieren. Wir haben Komponenten und Klassen, die andere Komponenten und Klassen inkludieren. Um die dadurch entstehende Liste nicht manuell zu bauen bauen und nicht ständig updaten zu müssen, sollte man einen Bundler einsetzen. Die haben dann Features wie Tree-Shaking und Transpiling usw. um damit ein effizientes Bundle zu bauen und Zeit zu sparen.

Ich hatte mir den Link vorher noch nicht angeschaut und bin von einem Bundler ausgegangen und hier wäre dann das Problem, wenn dieser dafür andere Bibliotheken dafür nutzt als Node.

Im CSS tun wir das und auch das führt zu Problemen, wie dass wir mit einer relativ alten SASS Version arbeiten müssen und dort nicht updaten können, weil es auf Jekyll Seite kein Update für die SASS Version gibt, zumindest als ich zuletzt geschaut hatte.

Deshalb wäre einen Bundler ideal, um auch das Problem mit SASS für die Zukunft auch aus der Welt zu schaffen. Dazu kommt, dass im JavaScript Kontext das bundle von der Komplexität her größer ist und auch Vorteile in der Entwicklung mit sich bringen kann.

Listor commented 5 months ago

Die Bundle Thematik hat sich durch das #114 Ticket jetzt erledigt bzw. wurde dort umgesetzt.

Im Production oder Staging Environment führt Jekyll beim bauen jetzt auch den Node Bundle Prozess aus, somit ist es ein Bundler auf beiden Seiten und lokal muss kein Node installiert werden.

Auch wenn es noch nicht überall ausgerollt ist, würde ich damit das Ticket erstmal schließen.