Wie reduziert die Webpack-Bündelung den wiederholten Download beliebter Bibliotheken wie React?

Question

Mein Verständnis ist, dass Webpack Ihren gesamten Code und seine abhängigen Bibliotheken (wie React) in eine js-Datei bündeln wird. Wenn jemand Ihre Website besucht, lädt er dieses Paket herunter, das alles enthält, und führt es dann aus. Bedeutet das, dass selbst wenn der Besucher eine andere Seite besucht hat, auf der zuvor React ausgeführt wurde, er trotzdem Ihr Paket mit React herunterladen und ausführen wird? Ist das nicht ein unnötiger Download, da dieser Benutzer bereits React hat?

Answer 1

Eine der Anwendungen von Webpack ist die Bündelung Ihres gesamten Codes in einer Datei, um die Downloadzeit zu reduzieren. In http ist es viel effizienter, eine Anfrage für eine große Datei als Dutzende von Anfragen für kleine Dateien zu stellen.

Beantworten Sie Ihre erste Frage: Ja, ein Benutzer, der zu einer anderen React App navigiert ist, muss immer auch Ihre Skripte herunterladen.

Und für Ihre zweite Frage: Nein, es verursacht keinen unnötigen Download. Es gibt viele Dinge, die Ihr Bundle einzigartig machen und es wäre sehr schwierig (und sehr unsicher), einen Cache zwischen Apps verschiedener Domains zu implementieren. Stellen Sie sich eine Site vor, auf deren reaktivem Code bösartiger Code enthalten ist. Sie möchten nicht, dass der Browser diesen Code in Ihrer eigenen App wiederverwenden kann.

Um die Leistung zu verbessern, können Sie jedoch mit dem Browser-Cache Ihre Bundles beim Herunterladen auf dem Client-PC speichern. Dadurch müssen sie die Skripte nicht jedes Mal herunterladen, wenn sie Ihre App besuchen, sondern nur, wenn die Bundles ablaufen oder sich ändern.

Vielleicht kann this link Ihnen helfen zu verstehen, wie Sie Ihren Webpack Build Fang hinzufügen.