Automatisieren Sie die Leistungstests mit grunt.js

Key Takeaways

• Der Task -Läufer von Grunt.js kann verwendet werden, um die Leistungstests während des Webentwicklungsprozesses zu automatisieren, um sicherzustellen, dass die Leistungsziele oder „Budgets“ ohne addierte manuelle Tests zu QA -Prozessen hinzugefügt werden.
• Das Grunt Perfbudget -Plugin verwendet die api webpagetest.org, um eine Site gegen Metriken wie Seitengewicht, Bildgrößen, Skriptgewicht und Rendernzeit zu messen. Entwickler können explizite Budgets für diese Metriken festlegen, gegen die das Plugin dann die Site misst.
• grunn.js ist für Leistungstests von entscheidender Bedeutung, da die Aufgaben automatisiert werden, die sicherstellen, dass der Code effizient und ohne Fehler ausgeführt wird, die Zeit sparen und das Risiko menschlicher Fehler verringern. Dies führt zu einer zuverlässigeren und höherwertigeren Software.

In diesem Alter von 2 MB -Webseiten werden die Leistungsbudgets zu notwendigen Teilen unseres Webentwicklungsprozesses. In Zusammenarbeit mit den Stakeholdern Ihres Projekts wird es für die Verantwortung aller - Designer und Entwickler -, Ziele für die Leistung Ihrer Website festzulegen.

Sie können Budgets für eine Reihe verschiedener Metriken festlegen: Zum Beispiel ein Zielseitengewicht von 500 Kilobyten, die keine einzige Seite in Ihrem Projekt überschreiten kann. Elemente, die zu der Seite hinzugefügt werden, um 500 KB zu überschreiten, müssten gegen andere Elemente auf der Seite bewertet werden, um deren Aufnahme in das Design zu bestimmen. Wie Tim Kadlec beschreibt, muss Ihre Entscheidung einen von 3 Pfaden erfordern:

1. optimieren Sie eine vorhandene Funktion oder ein Asset auf der Seite
2. Entfernen Sie eine vorhandene Funktion oder ein Asset von der Seite
3. Fügen Sie nicht die neue Funktion oder das Asset
hinzu

Sie können auch Budgets für die in Kilobytes heruntergeladenen Gesamtbilder, die Anzahl der Produktbilder pro Anforderung oder die durchschnittliche Download -Zeit für Ihre Website gemäß webpagetest.org.

festlegen.

Sobald Sie Ihr Budget festgelegt haben, ist es eine ganze zusätzliche Aufgabe, die Leistung Ihrer Website während der gesamten Entwicklungsphase zu messen. Wie können Sie dies erreichen, ohne Ihrem QA -Prozess ein wesentliches manuelles Test hinzuzufügen? Geben Sie grunT.js!

ein

grunn.js webpagetest.org = automatisierte Leistungstests Bliss

Während es eine Reihe von Grunzen -Plugins gibt, die Ihnen helfen, Ihre Website -Leistung zu messen, konzentriere ich mich auf die genaueste, die ich gefunden habe: Grunn Perfbudget. Diese wundervolle Grunzenaufgabe verwendet die webpagetest.org -API, um Ihre Website an einer Menge nützlicher Metriken wie Seitengewicht, Bildgrößen, Skriptgewicht und Renderzeit zu messen. Sie können auch explizite Budgets für diese Metriken festlegen, an denen das Plugin Ihre Website misst!

Erwerben Sie einen API -Schlüssel

Bevor Sie Ihre Grunzenaufgabe einrichten können, müssen Sie webpagetest.org senden, damit ein API -Schlüssel in Ihre Gruntfile aufgenommen wird. (Gute Nachrichten: Es gibt eine Alternative zu diesem Prozess in Arbeit!)

Installieren Sie das Grunzen -Perfbudget -Plugin

Wenn dies das erste Mal mit Grunn verwendet wird, sehen Sie sich mein Tutorial an, um mit Grunzen aufzusteigen.

Wenn Sie bereits Grunzen auf Ihrem Computer installiert haben, müssen Sie nur das Perfbudget -Plugin installieren, bevor wir unsere Leistungstests einrichten. Navigieren Sie über die Befehlszeile zu Ihrem Projektordner und führen Sie aus:

npm install grunt-perfbudget --save-dev

Oder wenn Sie ein Beispielprojekt arbeiten möchten, geben Sie mein Github-Repository, grunz-perfbudget-Demo und führen Sie die NPM-Installation aus, um in Gang zu kommen.

Konfigurieren Sie die Perfbudget -Aufgabe

Sobald Sie das Plugin installiert haben, müssen Sie Ihre Plugin -Optionen einrichten und eine Aufgabe in Ihrer gruntfile.js erstellen. Ich habe eine Demo -Gruntfile erstellt, die die Perfbudget -Aufgabe als Teil des Standard -Grunzenbefehls ausführt, mit nur dem minimalen Optionen - eine URL zum Testen und Ihren API -Schlüssel:

module<span>.exports = function(grunt){
</span>  <span>require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
</span>
  grunt<span>.initConfig({
</span>    <span>pkg: grunt.file.readJSON('package.json'),
</span>
    <span>perfbudget: {
</span>      <span>default: {
</span>        <span>options: {
</span>          <span>url: 'http://cfarman.com',
</span>          <span>key: 'APIKEY'
</span>        <span>}
</span>      <span>}
</span>    <span>}
</span>  <span>});
</span>
  grunt<span>.registerTask('default', ['perfbudget']);
</span><span>};</span>

Wenn ich die Standard -Grunzenaufgabe mit meinem API -Schlüsselsatz ausführe, erhalte ich die folgende Ausgabe in der Konsole:

Warum ist meine Aufgabe gescheitert? Weil meine Website das Standardbudget nicht überschritten hat: Rendern in weniger als 1000 ms. Es scheiterte auch bei einer Metrik namens "SpeedIndex". Wie erfahren ich mehr über die Leistung meiner Webseite? Zum Glück hat WebPagetest eine sehr detaillierte URL, auf die ich mich verweisen kann und direkt aus der Konsole in meinem Perfbudget -Test verknüpft ist!

Um meine Website zu verabschieden und die Grunzaufgabe nicht zu veranlassen (damit die Website von Website in einer automatisierten Build -Umgebung gestoppt wird), habe ich zwei Optionen: Ich kann meine Budgets bearbeiten, bis ich bestehe (nützlich für das Testen, nützlich. Nicht so sehr für die Leistung!) Oder ich kann meine Leistungsbudgetregeln befolgen: optimieren, Sachen entfernen oder nicht mehr Dinge hinzufügen, bis ich die Standardmetriken übergasse. Lassen Sie uns vorerst mit unserer grunzigen Aufgabe spielen, um zu sehen, wie ein vorübergehender Test aussieht.

Perfbudget -Optionen und WebPagetest -Metriken

Wie die meisten Grunzaufgaben kann ich mit der Perfbudget -Aufgabe eine Reihe von Optionen anpassen. Und aufgrund der erstaunlich detaillierten Kennzahlen, die von WebPagetest gemessen wurden, kann ich alle möglichen Metriken für mein Leistungsbudget testen, um festzustellen, ob ich bestehe oder versagst.

Zunächst werde ich meine Optionen ändern, damit meine Website nicht mehr fehlschlägt und die Grunzenaufgabenberichte, die ich unter dem Budget bin. Dies erfordert eine zusätzliche Eigenschaft in meiner Perfbudget -Aufgabe namens "Budget":

<span>perfbudget: {
</span>  <span>default: {
</span>    <span>options: {
</span>      <span>url: 'http://cfarman.com',
</span>      <span>key: 'APIKEY',
</span>      <span>budget: {
</span>        <span>render: '3000',
</span>        <span>SpeedIndex: '5500'
</span>      <span>}
</span>    <span>}
</span>  <span>}
</span><span>}</span>

Die Site ist zu diesem Zeitpunkt ziemlich langsam, damit meine Werte hoch sind, um den Test zu bestehen.

Die Ergebnisse? Ich bin bestanden!

Dies bedeutet, dass die Grunzaufgabe nicht scheitert, und wenn ich andere Aufgaben in meiner Gruntfile habe, werden sie als normal vorgehen - Erfolg!

Was können wir neben den Standardmetriken noch messen? Alle möglichen Dinge, einschließlich:

• Loadtime: Die Gesamtlastzeit in Millisekunden
• Anforderungen: Die Gesamtzahl der angeforderten Dateien
• bytesin: das Gesamtseitengewicht in Bytes

Die letzte Metrik ist diejenige, die ich am häufigsten meldete und die ich für Budgetierungszwecke verfolgen möchte. Schauen wir uns also an, wie Sie es messen können:

npm install grunt-perfbudget --save-dev

Ich habe ein Gesamtbytes -Budget von 2 Millionen ausgewählt, da das durchschnittliche Seitengewicht zu diesem Zeitpunkt knapp 2 Megabyte liegt. Sobald ich die Budgetoptionen bearbeite, kann ich sehen, wie ich die Grunzaufgabe erneut ausführe:

Meine Website taktet bei 3 Megabyte ein und legt es über das Budget! Sieht so aus, als hätte ich etwas zu tun. Aber diese Informationen zur Hand zu haben, ist für mich als Entwickler unglaublich nützlich. Kein anderes Grunzen-Plugin enthält Informationen zum Gesamtgewichtsgewicht in einer so leichten und leicht zu testenden Weise. Durch die Messung dieser wichtigen Metriken kann ich die wirklichen Auswirkungen von Entwicklungsentscheidungen sehen , da ich codiere - und hilft mir, die Leistung als Ergebnis zu verbessern.

häufig gestellte Fragen zur Automatisierung von Leistungstests mit grunn.js

Was ist grunn.js und warum ist es für Leistungstests wichtig? Es ist auf node.js erstellt und verwendet eine Befehlszeilenschnittstelle, um benutzerdefinierte Aufgaben auszuführen, die in einer Datei definiert sind, die als Gruntfile bezeichnet wird. Grunt.js ist für Leistungstests von entscheidender Bedeutung, da Entwickler die Aufgaben automatisieren können, die sicherstellen, dass der Code effizient und ohne Fehler ausgeführt wird. Dies spart Zeit und verringert das Risiko menschlicher Fehler, was zu einer zuverlässigeren und qualitativ hochwertigeren Software führt. Zuerst müssen Node.js und NPM (Node Package Manager) auf Ihrem System installiert sein. Sobald Sie diese haben, können Sie Grunt.js installieren, indem Sie den Befehl npm install -g grunzen -cli in Ihrem Terminal ausführen. Dadurch werden die Grunn -Befehlszeilenschnittstelle weltweit auf Ihrem System installiert. Danach können Sie Ihrem Projekt Grunz- und Grunz -Plugins hinzufügen, indem Sie sie als Abhängigkeiten in einer Paket.json -Datei definieren und die NPM -Installation ausgeführt haben.

Wie erstelle ich eine Gruntfile für mein Projekt? > Eine Gruntfile ist eine JavaScript -Datei, die in das Stammverzeichnis Ihres Projekts angezeigt wird und die Konfiguration für Grunzaufgaben enthält. Es heißt grunnfile.js oder grunnfile.coffee und ist in JavaScript oder Coffeescript geschrieben. Um eine Gruntfile zu erstellen, definieren Sie eine Wrapper -Funktion, die eine Instanz der Grunz -Laufzeit übergeben wird. In dieser Funktion können Sie Grunzen -Plugins laden, Aufgaben konfigurieren und benutzerdefinierte Aufgaben registrieren.

Was sind einige gängige Aufgaben, die mit grunt.js automatisiert werden können? Dazu gehören das Minimieren von JavaScript- und CSS -Dateien, um ihre Größe zu reduzieren, weniger zu kompilieren, und SASS -Dateien in CSS, das Leinen von JavaScript -Code, um Fehler zu erfassen und die Codierungsstandards durchzusetzen, Unit -Tests auszuführen, um sicherzustellen HTTP -Anforderungen. GrunT.js, Sie können Plugins wie Grunzen-Contrib-UGlify für Minification, GrunT-Contrib-CSSmin für die CSS-Minifikation, Grunz-Contrib-Jshint für Lining und Grunzen-Contrib-Qunit für Unit-Tests verwenden. Sie installieren diese Plugins über NPM, laden sie in Ihre Gruntfile mit grunn.loadnpMtasks () und konfigurieren sie, indem Sie eine Eigenschaft zur methode grunt.initconfig () hinzufügen. Sie können dann die Aufgaben aus der Befehlszeile mit GrunT ausführen. Grunt.js durch Definieren einer Aufgabe, die andere Aufgaben aufruft. In Ihrer Gruntfile können Sie GrunT.registerTask () verwenden, um eine Aufgabe zu definieren, die mehrere Aufgaben in der von ihnen angegebenen Reihenfolge ausführt. Zum Beispiel Grunt.registerTask ('Standard', ['JSHINT', 'Qunit', 'Uglify']); Würde ich die Aufgaben von JSHINT, QUNIT und UGLIFY in dieser Reihenfolge ausführen. .initconfig () Methode in Ihrer Gruntfile. Jede Aufgabe verfügt über eine Reihe von Optionen, die ihr Verhalten steuern, und diese können im Konfigurationsobjekt der Aufgabe angegeben werden. Beispielsweise enthält die hässliche Aufgabe Optionen für Mangle, komprimieren und verschönern Sie diese Kontrolle, wie der JavaScript -Code minifiziert wird. > Die Paket.json -Datei in einem Grunzenprojekt wird verwendet, um die Abhängigkeiten des Projekts zu verwalten. Es listet die Grunzen -Plugins und andere NPM -Pakete auf, die das Projekt ausführen muss. Wenn Sie die NPM -Installation ausführen, befasst sich NPM in der Paket.json -Datei und installiert die aufgelisteten Pakete. Dies erleichtert die Verwaltung und Weitergabe der Abhängigkeiten Ihres Projekts. Es gibt Grunzen -Plugins für beliebte Test -Frameworks wie Mokka, Jasmine und Qunit, und Sie können auch benutzerdefinierte Aufgaben schreiben, um Tests mit anderen Frameworks auszuführen. Dies macht Grunn.js zu einem vielseitigen Tool zur Automatisierung von Leistungstests.

Was sind einige Best Practices für die Verwendung von Grunt.js für Leistungstests? --verbose-Flagge beim Ausführen von Aufgaben, um eine detaillierte Ausgabe zu erhalten und das Flag-Force-Flag zu verwenden, um Aufgaben weiter auszuführen, auch wenn man fehlschlägt. Es ist auch eine gute Idee, Ihre Grunzen -Plugins regelmäßig zu aktualisieren, um die neuesten Funktionen und Fehlerbehebungen zu erhalten.

Das obige ist der detaillierte Inhalt vonAutomatisieren Sie die Leistungstests mit grunt.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!