Viele CDNjs vs eine minimierte lokalen js

Question

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.1/jquery.inputmask.bundle.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/numeral.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/spin.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/ladda.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/js/bootstrap-modalmanager.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/js/bootstrap-modal.min.js"></script> 

vs

<script src="/myMin.js"> 

(myMin.js enthält alle Datei js verketteten zusammen und minimierte) Was für die Leistung ist die beste? Ich verwende cdnjs, weil es das Problem von Leuten in anderer Region löst, die die js-Datei direkt von meinem Server herunterladen. Zum Beispiel müssen Leute in Asien meine js-Datei nicht vom USA-Server herunterladen, was ein riesiges Leistungsproblem darstellt. cdnjs hilft mir mit js-Datei auf der ganzen Welt verstreuen. Da cdnjs asynchron heruntergeladen wird, wann wird myMin.js bevorzugt?

Answer 1

Ich würde sagen, dass die Verwendung von vielen CDN-Referenzen vorzuziehen ist, aus dem einfachen Grund von HTTP/2.

Cloudflare unterstützt HTTP/2, glaube ich, also sind Sie besser dran, wenn Sie mehrere einzelne Skripte als eine kombinierte haben.

Von ihrem Blog Beitrag mit dem Titel "HTTP/2 for Web Developers", Abschnitt namens "Stop Concatenating Files" ist besonders relevant:

jedoch Dateien verketten ist nicht länger ein Best Practice in HTTP/2. Während die Verkettung die Komprimierungsraten noch verbessern kann, erzwingt sie teure Cache-Ungültigmachungen. Auch wenn nur eine einzige CSS-Zeile geändert wird, müssen Browser alle Ihre CSS-Deklarationen neu laden.

Darüber hinaus verwendet nicht jede Seite Ihrer Website alle Deklarationen oder Funktionen in Ihren verketteten CSS- oder JavaScript-Dateien. Nach dem Zwischenspeichern ist dies keine große Sache, aber es bedeutet, dass unnötige Bytes übertragen, verarbeitet und ausgeführt werden, um die erste Seite, die ein Benutzer besucht, rendern zu lassen. Während der Overhead einer Anfrage in HTTP/1.1 dies zu einem lohnenden Kompromiss macht, kann es die Time-to-First-Paint in HTTP/2 verlangsamen.

Anstatt Dateien zu verketten, sollten Webentwickler sich mehr auf die Optimierung der Caching-Richtlinie konzentrieren. Durch das Isolieren von Dateien, die sich häufig von denen ändern, die sich selten ändern, ist es möglich, so viel Inhalt wie möglich aus Ihrem CDN oder dem Browser-Cache des Benutzers bereitzustellen.

Wir alle müssen beginnen, diese Standardtricks zur Verbesserung der Leistung in Frage zu stellen, jetzt da HTTP/2 pretty widely supported ist.

Answer 2

Es gibt mehrere Dinge zu beachten, um eine Entscheidung zu treffen. Ein paar von ihnen:

Leistung: Die Verwendung eines CDN wird empfohlen, da diese JS-Dateien weltweit stark zwischengespeichert werden. Dies hilft am meisten bei Benutzern, die sich weit entfernt von Ihrem Ursprungsserver befinden. Dies wird Ihnen auch dabei helfen, die Bandbreitennutzung in Ihrem Ursprung zu sparen, genau wie CPU und andere Ressourcen.

Rahmenkompatibilität: Der Nachteil von Dateien CDN besteht darin, dass, wenn die öffentliche Bibliothek alle Änderungen an einer Versions-Update hat, wird Ihre Anwendungen stoppen können, da einige Methoden oder Funktionen arbeiten, kann von Version zu Version ändern. Wenn Sie eine lokale Datei verwenden, können Sie sicher sein, dass Ihre Anwendung unabhängig von Aktualisierungen der öffentlichen Bibliothek funktioniert.

Wenn Sie nicht viele Anwendungen haben, die eine Änderung in einer Methode in einer der Bibliotheken kosten würden, würden Sie die CDN-Versionen der Bibliotheken so verwenden, wie sie letztendlich speichern würden Sie Ressourcen; Lass das Geld oder Server-Ressourcen sein.