Erfahrungsaustausch mit Webpacks

Webpack ist ein Modul-Bundler. Sein Hauptziel besteht darin, die gepackten Dateien in Browsern zu packen, aber sie können auch zur Transformation, Bündelung oder Paketierung verwendet werden. Ich hoffe, dass dieser Artikel allen helfen kann .

Cache

Dateinamen generieren [name].[contenthash:8].js, max-age + cdn für das Caching kombinieren.

Laden von Webseiten

HTML

war früher ein fester HTML-Code, HTML -> Versionsnummer der JS-Datei (über Webpack eingegeben) -> Bestimmen Sie die spezifischen JS-Dateien anhand der Version Nummer . (Jetzt, wo ich darüber nachdenke, macht es keinen Sinn, auch wenn es nicht so stark mit dem Backend verknüpft ist)

Jetzt ist es das geänderte HTML, das über HtmlWebpackPlugin eingegeben wird (generiert von Webpack, enthält js mit Versionsnummer)

Auf diese Weise wird auch eine Seriennummer gespart (Abrufen der Versionsnummerndatei). Gleichzeitig ist es auch praktisch, Graustufen zu erstellen. Wenn Sie beispielsweise die Anforderungen veröffentlichen, lassen Sie sie zuerst einige Benutzer erleben, geben Sie dann den HTML-Code dynamisch ein und senden Sie ihn an den Hintergrund. (HTML zu reparieren ist nicht so einfach)

CSS-Trennung

In Guanmai wird es dank der Verbesserung der Klassennamen durch React-GM nur sehr wenige CSS-Änderungen geben. Da es nur wenige Änderungen gibt, ist es nicht schlecht, das CSS zu trennen und ExtractTextPlugin zum Trennen des CSS zu verwenden.

Nach der Trennung wird die Größe von js reduziert und js wird nicht blockiert. Gleichzeitig können CSS und js gleichzeitig gezogen werden.

common

new CommonsChunkPlugin({name: 'commons'})

Wenn Sie sich den gepackten gemeinsamen Code ansehen, werden Sie feststellen, dass die IDs und Hashes anderer Module gemeinsam eingegeben werden, sodass sich die Commons-Datei jedes Mal ändert. was das Cachen erschwert.

Stellen Sie einfach zwei Dateilisten bereit, und Sie werden feststellen, dass Webpack die ID und den Hash in die Manifestdatei einfügt. Auf diese Weise können Commons zwischengespeichert werden. Übrigens habe ich auf der offiziellen Website keine Einführung gesehen, lassen Sie es mich wissen, wenn ja.

new CommonsChunkPlugin({names: ['commons', 'manifest']})

Lokale Entwicklung

Lassen Sie uns über lokale Dienste sprechen. Es gibt keinen Hintergrunddienst, daher müssen sie natürlich irgendwo tätig sein. Verfügbar über devServer.proxy. Sie können auch einen Agenten verwenden, um im externen Netzwerk nach Fehlern zu suchen. Da es sich ausschließlich um Quellcode handelt, erfolgt die Fehlerprüfung sehr schnell.

"proxy": {
    "/ticket/*": {
      "target": "http://dev.guanmai.cn:7413",
      "changeOrigin": true
    }
}

Paketierungsgeschwindigkeit

DllPlugin

Wenn das Projekt groß wird, sind zwangsläufig viele Pakete erforderlich, was zu einer sehr langen Verpackungszeit führt. Der offiziell empfohlene Ansatz besteht darin, Dateien, die sich nicht häufig ändern, in DLLs umzuwandeln.

Unser Projekt wird aufgerufen react react-dom prop-types classnames mobx mobx-react lodash moment big.js usw.

Online-Informationen zeigen, dass der Dateiname der DLL [name]_[hash].dll.js ist, unserer ist [npm version]_dll.js npm version, der von der package.json-Version eingelesen wird.

Warum nicht Hash, sondern die NPM-Version verwenden? Beim Nachdenken über die Sekundärverpackung ist ein Problem aufgetreten. Wie können wir beurteilen, ob die DLL neu verpackt werden muss? Was tun, wenn es sich um Hash handelt (bitte empfehlen Sie eine Lösung). Wenn Sie die npm-Version verwenden, werden wir neu packen, sobald sich die Version ändert. Wenn React beispielsweise aktualisiert wird, haben wir Version + und neu packen.

happypack

happypack verbessert die Build-Geschwindigkeit erheblich. Es kann in mehrere Threads gepackt werden und der Cache beschleunigt auch den Neuaufbau.

devtool

eval wird für die Entwicklung verwendet und Source-Map wird für die Produktion verwendet (wird verwendet, um Anzeigeprobleme auf Kosten der Paketierungsgeschwindigkeit zu beheben, innerhalb eines akzeptablen Bereichs)

babel-loader

CacheDirectory merken

noParse && alias

Einige Bibliotheken müssen nicht analysiert werden, die noParse-Konfiguration analysiert nicht und der Alias ​​zeigt auf x.min .js-Datei.

Baumschütteln

Es wird nicht genutzt, es fühlt sich an, als wäre es noch nicht der richtige Zeitpunkt. Es gibt einen guten Artikel. Dein Tree-Shaking ist nutzlos

Komprimierung

UglifyJsPlugin

Am Anfang habe ich webpack.optimize.UglifyJsPlugin verwendet, das 1.x war In dieser Version basiert das Webpack auf uglify-js@2.x.

Da das Webpack jetzt separat erhältlich ist, verfügt es auch über viele weitere Funktionen. Es unterstützt Cache und Multi-Core-Komprimierung. Ich habe es ausprobiert und es war ziemlich schnell. webpack.optimize.UglifyJsPlugin ist eigentlich uglifyjs-webpack-plugin.

Was mich überrascht, ist, dass auf der offiziellen Website steht, dass es auf uglify-es basiert. Aber ich denke, die Abhängigkeit ist immer noch uglify-js. Fremdheit.

UglifyJsParallelPlugin

Vor der offiziellen Veröffentlichung habe ich webpack-uglify-parallel verwendet, das Multicore unterstützt. Die Geschwindigkeit unterscheidet sich nicht wesentlich vom uglifyjs-webpack-plugin.

Als ich den Artikel schrieb, habe ich Github durchgesehen und festgestellt, dass er im Juli aufgegeben und in die offizielle Website integriert wurde.

Andere

babel-minify-webpack-plugin von babel, bleiben Sie am Rande.

Skript-CD

Einige js (gm-fetch babel-polyfill) haben nur sehr wenige Änderungen. Das Packen mit Webpack ist etwas verschwenderisch. Sie können es über cdn abrufen und das Skriptformular einfügen HTML-Dokument.

Analyse

Es gibt Diagramme und sehr intuitive Analysen. Ich bevorzuge es.
Webpack-Monitor

Der alte ist Webpack-Bundle-Analyzer

Verwandte Empfehlungen:

Web-Beispielcode zum Erstellen von Front-End-Projekten mit Webpack

Zusammenfassung der Webpack-Konfigurationsmethoden

Detaillierte Erläuterung der NPM- und Webpack-Konfigurationsmethoden in node.js

Das obige ist der detaillierte Inhalt vonErfahrungsaustausch mit Webpacks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!