Warum wird die Abhängigkeit im Webpack-Artefakt oft wiederholt?

Question

Ich habe einen Multi-Entry-Point-Webpack-Build und arbeite daran, die Artefaktgröße für die Produktion zu optimieren. webpack-bundle-analyzer ergaben folgendes Bild:

Es ist offensichtlich, dass die AtlasKit Abhängigkeiten einen großen Teil der Gesamt Artefakt Größe bilden. Insbesondere sehe ich, dass styled-components.es.js viele Male wiederholt wird. Mehr noch, die gleiche Abhängigkeit ist auch in vendor.js vorhanden, die selbst unter allen anderen Paketen geteilt wird.

Kann jemand erklären, warum styled-components.es.js überall wiederholt wird und warum es nicht über einzelne Abhängigkeit in vendor.js geteilt werden kann? Gibt es etwas, was ich tun kann, um Duplikate zu entfernen und nur von der einzelnen styled-components.es.js Abhängigkeit in vendor.js abhängen?

Ich fand es ein bisschen seltsam, dass AtlasKit Abhängigkeiten einen verschachtelten node_modules Ordner haben, der im Paket enthalten ist. Warum ist dist nicht genug? Vielleicht ist das ein Teil des Grundes, warum styled-components.es.js nicht über vendor.js geteilt werden kann?

Ich habe versucht, die Abhängigkeit manuell über webpack des IgnorePlugin (ähnlich moment.js Positionen) aber nicht so weit, dies zu tun auszuschließen.

Alle Einsichten würden sehr geschätzt werden. Vielen Dank!

Answer 1

Es klingt wie Sie eine Abhängigkeit von mehreren Chunks in einen gemeinsamen Chunk konsolidieren möchten: Dafür würde ich empfehlen, in webpack.CommonsChunkPlugin zu suchen.

Von besonderem Interesse ist die minChunks Eigenschaft, die Sie an das Plugin übergeben können:

minChunks: Nummer | Unendlichkeit | Funktion (Modul, count) -> boolean, // Die Mindestanzahl der Stücke, die brauchen ein Modul enthalten, bevor es in den Commons Chunk verschoben wird. // Die Nummer muss größer oder gleich 2 und kleiner oder gleich der Anzahl der Chunks sein. // Passing Infinity erstellt nur die Commons Chunk, aber bewegt keine Module hinein. // Durch Bereitstellung einer function können Sie benutzerdefinierte Logik hinzufügen. (Der Standardwert ist die Anzahl der Chunks)

Ich rate versuchen, dieses Plugin Ihre Webpack Config hinzuzufügen:

new webpack.optimize.CommonsChunkPlugin({ 
    children: true, 
    async: true, 
    minChunks: 3 
}) 

Diese Nutzung weiter in "Extra async commons chunk" beschrieben.

Wenn Sie daran interessiert sind, wie viel Code zwischen Ihren Blöcken geteilt wird, sollten Sie auch versuchen, samccone/bundle-buddy für Webpack auszuprobieren.

Wenn Sie bereits CommonsChunkPlugin verwenden, müsste ich Ihre Webpack-Konfiguration sehen, um weitere Informationen bereitzustellen.