Optimierung der Projekterstellungszeit

Wo ich arbeite (im Startup Spot.IM , dessen Größe irgendwo zwischen klein und mittel liegt), wird Webpack verwendet, um verschiedene Projekte zu erstellen. Nach 4-jähriger Arbeit an unserem Hauptprodukt, bei der so viele Leute zu seinem Code beigetragen haben, dass er nicht gezählt werden kann, betrug die Zeit für die Erstmontage exorbitante 90 Sekunden und die Zeit für die erneute Montage - 14.

Nach jedem Klick auf die Schaltfläche "Speichern" dauert es ungefähr 14 Sekunden, bis der Vorgang abgeschlossen ist.

Nachdem wir auf einige einfache Optimierungen zurückgegriffen hatten, wie sie jeder in seinem Projekt anwenden kann, konnten wir die obigen Zahlen für die Montage auf 20 Sekunden und für die Neuerstellung des Projekts auf 1 Sekunde reduzieren.



In diesem Artikel möchte ich auf einige einfache Änderungen eingehen, durch die das Projekt seine Montagezeit erheblich verkürzen kann. Beachten Sie, dass dieser Artikel für Sie möglicherweise nicht besonders nützlich ist, wenn Sie CreateReactApp (oder einen anderen modischen Anwendungsgenerator) verwenden. Wenn Sie jedoch so etwas nicht verwenden, kann das, was hier besprochen wird, für Sie sehr nützlich sein.

Messung der Zeit, die zum Erstellen eines Projekts benötigt wird

Lassen Sie uns vor jeder Optimierung eine Messung der Indikatoren einrichten, anhand derer wir die Arbeitsergebnisse beurteilen können. Verwenden Sie dazu das Paket speed-measure-webpack-plugin (SMP):

const webpackConfig = require('./webpack.config') const SpeedMeasurePlugin = require('speed-measure-webpack-plugin') const smp = new SpeedMeasurePlugin({   disable: !process.env.MEASURE, }) module.exports = smp.wrap(webpackConfig) 

Wir legen die Webpack-Konfigurationsdatei in den SMP-Wrapper ein (starten den Mechanismus zur Leistungsmessung unter Verwendung der Umgebungsvariablen) und übergeben anschließend das Webpack-Konfigurationsobjekt. Danach steht uns ein ansprechender Bericht zur Verfügung, mit dem wir herausfinden können, wie viel Zeit während der Montage für jeden Bootloader aufgewendet wird. Mit SMP erhalten wir doppelte Vorteile. Erstens können wir nach einer gewissen Verbesserung sofort herausfinden, wie sich dies auf die Erstellungszeit des Projekts ausgewirkt hat. Zweitens haben wir sofort einen vollständigen Bericht über die Zeit, die jeder Bootloader benötigt (genauer gesagt die „Bootloader-Kette“).


Bericht erstellt mit Speed-Measure-Webpack-Plugin

Verbesserung der anfänglichen Erstellungszeit eines Projekts

Nach dem Start von SMP hatten wir Informationen darüber, wie sich die Erstellungszeit des Projekts ändert, wenn Verbesserungen am Erstellungsprozess vorgenommen wurden. Das erste, was wir zu optimieren begannen, war die anfängliche Erstellungszeit (dh die Zeit, die Webpack benötigte, um das Paket zu erstellen, nachdem es initialisiert wurde). Um den anfänglichen Erstellungsprozess zu beschleunigen, haben wir uns für den Bootloader mit cache-loader .

Cache-Loader ist ein Loader, der die Ergebnisse der Arbeit der darauf folgenden Loader zwischenspeichert und auf der Festplatte (oder Datenbank) speichert. Dies bedeutet, dass Sie beim nächsten Start von Webpack eine deutliche Verbesserung der Build-Geschwindigkeit feststellen können, oder zumindest hoffen können, dass dies der Fall ist.

Hier ist ein Beispiel:

 {  rules: [    {      test: /\.jsx?$/,      use: [        'cache-loader',        'babel-loader',      ],    },    {      test: /\.scss$/,      use: [        'style-loader',        'cache-loader',        'css-loader',        'postcss-loader',        'sass-loader',      ],    },  ] } 

Durch das Hinzufügen des cache-loader vor dem CSS -Loader (für CSS) und vor dem Babel-Loader (für JS) konnten 75 Sekunden der Zeit eingespart werden, die für die erstmalige Erstellung des Projekts aufgewendet wurde.

Nun arbeiten wir an der Zeit für den Zusammenbau. Wir werden versuchen, diese Zeit durch Ändern der devtool Eigenschaft zu verbessern.

Webpack-Codekarten

In den Webpack-Einstellungen finden Sie die devtool- Eigenschaft, mit der Sie gemäß der Dokumentation den Stil für die Erstellung von Codekarten auswählen können, die zur Verbesserung der Debugging-Funktionen verwendet werden. Die Sollwerte können die Geschwindigkeit der Montage und des Zusammenbaus stark beeinflussen. "

Mit anderen Worten, das Ändern der devtool Eigenschaft wirkt sich darauf aus, welche Codekarte dem Entwickler nach dem devtool des Projekts zur Verfügung steht. Dies hängt wiederum davon ab, wie viel Zeit für die Erstellung einer solchen Codekarte erforderlich ist.

Experimente mit dieser Eigenschaft können das Leben eines Programmierers nachhaltig verändern. Dies hat enorme Auswirkungen auf die Erstellungsgeschwindigkeit des Projekts. Wir haben nämlich den devtool Wert von source-map (wahrscheinlich ist dies der langsamste Modus) auf eval-source-map geändert und konnten die Zeit für das Zusammenbauen des Projekts von 14 auf 3,5 Sekunden reduzieren:

 {  devtool: process.env.NODE_ENV === 'development'    ? 'eval-source-map'    : 'source-map' } 

Die Eigenschaft devtool akzeptiert 12 devtool . CreateReactApp verwendet zum Beispiel eine billige Modul- Quellzuordnung. Wenn Sie diese Eigenschaft konfigurieren möchten, sollten Sie daher experimentieren und den für Sie am besten geeigneten Wert finden.

Es ist zu beachten, dass sich die Qualität der resultierenden Karten verschlechtert, wenn schnelle Methoden zum Erstellen von Codekarten verwendet werden. Diese Verschlechterungen können durch Starten des Debuggens festgestellt werden. Glücklicherweise können moderne Browser mit dem TC39 mithalten. Infolgedessen besteht (zumindest während der Entwicklung) kein wirklicher Bedarf für die Transpilation großer Codemengen. Wenn Sie Babel so konfigurieren, dass dieses Tool JavaScript auf ein Niveau transportiert, das die neueste Version des Browsers versteht (wie in CRA ), sollte beim Code-Debugging alles in Ordnung sein, da sich die Codezuordnungen nicht zu sehr vom Code selbst unterscheiden.

So sollte babel.config.js aussehen, wenn Sie sich dafür entscheiden, den Code in einen Zustand zu babel.config.js , der für die neuesten Versionen verschiedener Browser eindeutig ist:

 module.exports = {  presets: [    [      '@babel/preset-env',      {        targets: [          'last 1 chrome version',          'last 1 safari version',          'last 1 firefox version',        ].join(', '),      },    ],  ],  // ... } 

Das ist alles. In drei einfachen Schritten konnte die Bauzeit unseres Projekts erheblich reduziert werden.

Ich möchte darauf hinweisen, dass jemand, der anfängt, ein ähnliches Problem zu lösen, möglicherweise den Wunsch hat, zunächst die Webpack-Dokumentation zu lesen. Dies ist jedoch nicht die einzige Wissensquelle.

Ich habe einen anderen Ansatz gefunden, um wertvolle Informationen über Bauprojekte zu finden. Dieser Ansatz hat sich in der Praxis bewährt. Es besteht darin, die webpack.config Dateien bestehender Open Source-Projekte zu analysieren. Insbesondere die CreateReactApp- Projektdatei. Wenn Sie diese Datei gründlich lesen, können Sie viele nützliche Dinge herausfinden.

Zusammenfassung

Ein aufmerksamer Leser konnte feststellen, dass es gleich zu Beginn darum ging, die Montagezeit auf 1 Sekunde zu verkürzen. Und der beste Wert dieses im Text erwähnten Indikators war 3,5 Sekunden. Offensichtlich wurde etwas weggelassen, als der Optimierungsfortschritt des Montageprozesses beschrieben wurde. So ist es auch. Dank subtiler Optimierungen, die sehr stark von den Funktionen eines bestimmten Projekts abhängen, nämlich Spot.IM, konnte die Zeit für die erneute Montage des Projekts auf 1 Sekunde verkürzt werden, indem weitere 2,5 Sekunden gewonnen wurden. Daher wird hier keine Beschreibung dieser Verbesserungen bereitgestellt.

Sehr geehrte Leser! Optimieren Sie die Erstellungszeit Ihrer Projekte?