Webpack mit kleinen ersten Skript und asynchrone laden von allen anderen scripts
Habe ich begonnen, mit Webpack bei der Entwicklung üblichen web-sites, bestehend aus einer Anzahl von Seiten und von verschiedenen Seiten-Typen. Ich bin auf der RequireJs-Skript loader geladen, alle Abhängigkeiten auf Nachfrage bei Bedarf. Nur ein kleines Stück von javascript wird heruntergeladen, wenn die Seite geladen ist.
Was ich erreichen will, ist dies:
- Einem kleinen ersten javascript-Datei, lädt Abhängigkeiten asynchron
- Jeder Seite, geben Sie Ihre eigenen javascript, die möglicherweise auch Abhängigkeiten haben.
- Gemeinsame Module, Hersteller Skripte sollten gebündelt werden, gemeinsame Skripte
Ich habe versucht, viele Konfigurationen, um dies zu erreichen, aber ohne Erfolg.
JS:
entry: {
main: 'main.js', //Used on all pages, e.g. mobile menu
'standard-page': 'pages/standard-page.js',
'start-page': 'pages/start-page.js',
'vendor': ['jquery']
},
alias: {
jquery: 'jquery/dist/jquery.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js"),
new webpack.optimize.CommonsChunkPlugin('common.js')
]
In der html-ich will zum laden des javascripts so:
HTML:
<script src="/Static/js/dist/common.js"></script>
<script src="/Static/js/dist/main.js" async></script>
Und auf eine bestimmte Seite geben (Startseite)
HTML:
<script src="/Static/js/dist/start-page.js" async></script>
common.js sollte eine winzige Datei für schnelles laden der Seite. main.js Lasten async und require('jquery') im inneren.
Die Ausgabe von Webpack sieht vielversprechend aus, aber ich kann nicht Holen Sie sich die Anbieter bündeln zu laden asynchron. Andere Abhängigkeiten (meine eigenen Module und domReady) geladen, in ther automatisch generierte chunks, aber nicht jquery.
Finde ich viele Beispiele, die fast, aber nicht der wichtige Teil des Ladens Anbieter asynchron.
Ausgabe von webpack bauen:
Asset Size Chunks Chunk Names
main.js.map 570 bytes 0, 7 [emitted] main
main.js 399 bytes 0, 7 [emitted] main
standard-page.js 355 bytes 2, 7 [emitted] standard-page
c6ff6378688eba5a294f.js 348 bytes 3, 7 [emitted]
start-page.js 361 bytes 4, 7 [emitted] start-page
8986b3741c0dddb9c762.js 387 bytes 5, 7 [emitted]
vendor.js 257 kB 6, 7 [emitted] vendor
common.js 3.86 kB 7 [emitted] common.js
2876de041eaa501e23a2.js 1.3 kB 1, 7 [emitted]
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die Lösung für dieses problem ist zwei-Fach:
CommonsChunkPlugin
zu generieren, die gemeinsame bundle.Code Splitting
Bevor Sie beginnen mit webpack Sie müssen verlernen, werden abhängig von der Konfiguration. Require.js war alles über Konfigurationsdateien. Diese Haltung machte es schwer für mich, um den übergang in webpack, die modelliert, genauer nach CommonJS in node.js, die sich auf keine Konfiguration.
In diesem Sinne betrachten Sie die folgenden. Wenn Sie eine app haben, und Sie wollen, dass es asynchron laden einige andere Teile von javascript müssen Sie verwenden eines der folgenden Paradigmen.
Erfordern.sicher
require.ensure
ist ein Weg, können Sie eine "split-Punkt" in Ihrer Anwendung. Wieder, Sie können gedacht haben, Sie müssten dies mit der Konfiguration, aber das ist nicht der Fall. In dem Beispiel, wenn ich getroffenrequire.ensure
in meiner Datei webpack erstellt automatisch eine zweite bundle und laden Sie Sie nach Bedarf. Jeder code ausgeführt, die im inneren des split-Punkt gebündelt werden in einer separaten Datei.Require([])
Können Sie auch erreichen, die gleiche Sache mit der AMD-version des
require()
, die, nimmt ein array mit Abhängigkeiten. Dadurch wird auch der gleiche split-Punkt:Gemeinsame Bundles
In deinem Beispiel oben verwenden Sie
entry
zu erstellenvendor
bundle hat jQuery. Sie nicht brauchen, um manuell geben Sie diese Abhängigkeits-bundles. Statt, mit den split-Punkten über Sie webpack generiert diese automatisch.Verwenden
entry
nur für separate<script>
- tags in Ihre Seiten.Nun, Sie haben alles getan, dass Sie verwenden können, die
CommonsChunkPlugin
zusätzliche optimieren Sie Ihre Stücke, aber wieder die meisten von der Magie für Sie erledigt ist und außerhalb der Angabe der Abhängigkeiten der freigegeben werden soll, werden Sie nicht brauchen, um etwas anderes zu tun.webpack
ziehen, in der gemeinsamen chunks automatisch, ohne die Notwendigkeit für zusätzliche<script>
tags oderentry
Konfiguration.Fazit
Dem Szenario, das Sie beschreiben (mehrere
<script>
tags) kann eigentlich nicht sein, was Sie wollen. Mit webpack alle Abhängigkeiten und bundles können automatisch verwaltet werden, beginnen Sie mit nur einer einzigen<script>
tag. Nachdem durch mehrmaliges re-factoring von require.js zu webpack, ich habe festgestellt, dass meist der einfachste und beste Weg zur Verwaltung Ihrer Abhängigkeiten.Alle die besten!!!
require.ensure(['jquery'])
. Sie sollten nicht brauchen, zu tun. Gemeinsame Stücke ausbrechen sollte diese großen Dinge für Sie automatisch und anschließend können Sie eine<script>
tag laden Sie, wo immer Sie wan.require.ensure('[shared-bundle'])
ausspucken von common-Blöcken.require.ensure
und webpack übernimmt den rest. Aber ich habe versucht es ohne config und erstellt eine separate bundle.js Datei, es scheint nie zu versuchen, zu laden.Hier ist die Lösung, die ich kam mit.
Exportieren Sie zuerst diese beiden Funktionen zu
window.*
-- Sie wollen Sie in den browser.Dann, wenn Sie möchten, um Ihre Skripte auf einer Seite, fügen Sie einfach diese an Ihren HTML:
Nun alles in die
pages/
Verzeichnis finden Sie den vorkompilierten in einem separaten chunk, asynchron zur Laufzeit geladen, nur bei Bedarf.Ferner die Verwendung der oben genannten Funktionen, haben Sie jetzt eine bequeme Möglichkeit der Weitergabe von server-Seite Daten in Ihrer client-side scripts:
Und jetzt können Sie darauf zugreifen: