nicht angemeldet
Hallo,
ich habe eine front end web application, die im Browser mit esm-Modulen arbeitet. Für die Produktivumgebung würde ich aber gerne etwas "aufräumen". Einige große externe JS-Module sollen weiterhin via import geladen werden. Andere kleinere JS-Module, die auch mit import geladen werden, sollen gebündelt werden, sodass nur noch der relevante Code in einer Datei landet. Diese gebündelte Datei soll im Ergebnis weiterhin ESM sein, nur dass nur noch die "schweren" Bibliotheken als import geladen werden.
Bei Web Pack 5 habe ich nichts gefunden, wie sich dies erreichen lässt, bzw. scheint Web Pack 5 immer noch den output als ESM nur experimentell zu unterstützen. Daneben habe ich jetzt noch rollup.js gefunden, aber da bin ich wenig bewandert und aus der Dokumentation werde ich noch nicht ganz schlau.
Deshalb meine Frage, ob es hierfür eine best-practice gibt bzw. konkrete Beispiele?
Etwas verständlicher am Code-Beispiel
index.html
<html>
<head>
<script src="index.js" type="module"/>
</head>
</html>`
index.js
import {smallFunc} from "lib/many.small.files/sample.js"
import bigClass "lib/single.large.file/sample2.js"
import {smallFunc, otherFunc} from "lib/also.many.small.files/sample2.js"
Ich möchte nun gerne die index.js so umwandeln lassen, dass 1. und 3. import statement in einer Datei gebündelt werden. Das zweite import statement soll stehen bleiben.
Gruss, Michael
Rolf B