Module, also diese Art von Syntax direkt in JavaScript
import { myCounter, someOtherThing } from 'utilities';Welche wir normalerweise mit Webpack bündeln würden, aber jetzt in Safari Technology Preview, Firefox Nightly (Flag) und Edge unterstützt wird.
Es ist so konzipiert, dass es progressive enhancement unterstützt, da Sie sicher auf eine gebündelte und eine nicht gebündelte Version verlinken können, ohne dass Browser beide herunterladen.
Stefan Judis zeigt
<!-- in case ES6 modules are supported -->
<script src="app/index.js" type="module"></script>
<!-- in case ES6 modules aren't supported -->
<script src="dist/bundle.js" defer nomodule></script>Kein Bundling bedeutet einfachere Build-Prozesse, was großartig ist, aber auf all die anderen coolen Dinge verzichten, die ein Tool wie Webpack tun kann, wie „Tree Shaking“. Außerdem sind all diese Imports einzelne HTTP-Anfragen, was bei HTTP/2 vielleicht keine so große Rolle spielt, aber immer noch nicht ideal ist.
Khan Academy hat vor einiger Zeit dasselbe entdeckt, als sie mit HTTP/2 experimentierten. Die Idee, kleinere Dateien auszuliefern, ist großartig, um perfekte Cache-Hit-Raten zu garantieren, aber am Ende ist es immer ein Kompromiss und hängt von mehreren Faktoren ab. Für eine große Codebasis ist es sinnvoll, den Code in mehrere Teile aufzuteilen (ein Vendor- und ein App-Bundle), aber Tausende von winzigen Dateien auszuliefern, die nicht richtig komprimiert werden können, ist nicht der richtige Ansatz.
Preprocessing-Build-Schritte werden wahrscheinlich bleiben. Native Technologien können davon lernen, aber wir sollten auch nutzen, was beide gut können.