JavaScript Build-Optionen/Tools

Question

Heutzutage verliere ich mehr und mehr Arbeit auf die Client-Seite und daher werden meine JS-Dateien immer größer. Ich bin zu dem Punkt gekommen, an dem die meisten HTML-Seiten ein halbes Dutzend oder mehr JS-Importe in der Kopfzeile haben, und mir wurde klar, dass dies die Ladezeiten beeinträchtigt.

Ich habe vor kurzem diese script entdeckt, mit der Sie mehrere JS-Dateien mit einer HTTP-Anfrage herunterladen können. Es ist in PHP geschrieben und ein Django-Fan, den ich in Python umschreiben möchte. Ich plane, eine HTTP-Weiterleitung zu der vorminitierten und verketteten Datei zu verwenden, und ich frage mich, was die Kosten eines 301 wären. Bitte lassen Sie mich wissen, ob das eine dumme Idee ist.

Auf der anderen Seite bin ich etwas besorgt über die Einführung von Scripting-Logik in die Bereitstellung von statischen Dateien und ich frage mich, ob es eine brauchbare Build-Alternative wie sagen, eine ant-Aufgabe, die JS-Dateien verkettet und minimiert und ersetzt mehrere JS Downloads in einem HTML-Header mit einem großen, wie das Skript tut.

Answer 1

Für PHP bevorzuge ich es dynamisch zu tun, nur weil, wenn Sie einen Build-Schritt einführen, Sie einen der Hauptvorteile von PHP verlieren. In der Tat, auf das Risiko der Eigenwerbung habe ich Supercharging Javascript in PHP über dieses Problem geschrieben.

Natürlich können andere Technologien variieren.

Wieder ist es PHP, aber es ist nicht nur ein Stück Code für Sie zu verwenden (obwohl Sie direkt auf Part 6 springen können, wenn Sie nur einige voll funktionsfähige Code wollen) und möglicherweise Wert für Sie in Bezug auf die Identifizierung der Probleme und Dinge richtig machen und warum man sie so macht.

Ich bevorzuge Bündel von Javascript-Dateien (möglicherweise nur eine für die gesamte Anwendung) und dann aktiviert jede Seite einfach das Verhalten, das es durch Standard bedeutet, aber alle Code-Körper sind in der größeren zwischengespeicherten und minimierten JS-Datei. Es funktioniert auf diese Weise am schnellsten und ist ein guter Weg zu gehen.

Wenn Sie es als Teil eines Build-Prozesses möchten, was eine vernünftige Lösung ist, wenn Sie sowieso einen Build-Prozess haben, dann empfehle ich Ihnen, Ihren Code zu minimieren. Dafür gibt es viele Tools. Schauen Sie sich YUI Compressor an.

Wenn Sie eine statische Kombination von JS-Dateien erstellen, sind die anderen oben genannten Dinge wie Gzipping und damit verbundene Probleme immer noch relevant.

Answer 2

YUI Kompressor ist eine gute Wahl. Wenn Sie, wie Sie lernen wollen einen Ant-basierte Build-Prozess einzurichten, hat einen Blick auf diesem Tutorial: http://www.javascriptr.com/2009/07/21/setting-up-a-javascript-build-process/

Als Rubin-basierte Alternative, würde ich empfehlen Sprockets