So lösen Sie das Problem eines falschen Zugriffspfads nach dem Packen des Vue-Hintergrundbilds

In diesem Artikel wird hauptsächlich die Lösung für das Problem des Zugriffspfadfehlers nach dem Packen des Vue-Hintergrundbilds vorgestellt. Ich werde ihn jetzt als Referenz verwenden.

Fallumgebung

Das durch Vue-Cli-Gerüst erstellte Vue-Projekt

stieß beim Packen des Projekts auf das Problem eines Hintergrundbildpfadfehlers Bei einer Suche bei Google stellte ich fest, dass die Ursache darin lag, dass die Bildgrößenbeschränkung während der Konfiguration zu klein war.

Erstens lag der Fehlerpunkt im URL-Loader.

// url-loader配置
// build/webpck.base.conf.js
{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 query: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

Hier ist die Erklärung des obigen URL-Loader-Tests, bei dem es sich um eine reguläre Matching-Regel handelt, die alle Formate abgleicht, die mit regulären Regeln enden Projektdateien sind, um es ganz klar auszudrücken, alle Bilder (PNG, JPG, JPEG, GIF, SVG). Verwenden Sie dann den URL-Loader zur Verarbeitung. Es gibt auch eine Regel für die Verarbeitung wie folgt: Wenn eine Datei, die nicht größer als 10000 B ist, mit Base64 transkodiert wird, wird das Bild in das Base64-Format konvertiert. Wenn das Image 10 KB überschreitet, wird es separat in das Verzeichnis utils.assetsPath('img/[name].[hash:7].[ext]') gepackt (Sie können dies aus build/utils.js und config/ erfahren index.js Der Pfad ist das statische/img-Verzeichnis und der Bildname ist der Wert nach dem Hashing. Es gibt kein statisches Verzeichnis unter dem Stammverzeichnis, daher wird ein statisches Verzeichnis erstellt Am Ende werden wir später darüber sprechen. Wenn wir ein solches Verzeichnis erstellen, werden alle Bildzugriffspfade zum entsprechenden static/img/'Bildnamen'. An dieser Stelle kann festgestellt werden, dass wir den Zugriffspfad weiter klären, wenn Bilder, die kleiner als 10 KB sind, in Base64 konvertiert werden und bei Bildern, die größer als 10 KB sind, der Bildpfad in static/img/'Bildname' geändert wird.

// 目前我们的目录结构
index.html
static
  |--img
    |--'picname'
  |--css
    |--app.css
  |--js
    |--app.js

Wir wissen, dass img ein HTML-Tag ist und auf seinen Pfad ab index.html zugegriffen werden kann. Es kann über static/img/'picture aufgerufen werden name' Auf das Bild wird korrekt zugegriffen, daher ist der Pfad von img in Ordnung. Dann greift app.css falsch auf static/img/'picture name' zu, da es im CSS-Verzeichnis kein statisches Verzeichnis gibt. Dies verursachte das Problem eines Pfadzugriffsfehlers.

Lösung

1. Verwenden Sie kleine Bilder als Hintergrundbilder (Empfehlung):

Verwenden Sie Bilder, die kleiner als 10 KB sind Es gibt ein Bild als IMG-Bild, das größer als 10 KB ist.

2. Ändern Sie den Grenzwert des URL-Loaders (nicht empfohlen):

Aus der obigen Analyse ist ersichtlich, dass dies bei der Konvertierung des Bildes in Base64 der Fall ist Seien Sie kein Pfadfehlerproblem, stellen Sie sicher, dass Sie Ihren eigenen Hintergrund haben. Dieser Fehler kann verhindert werden, indem Sie alle Bilder in Base64 konvertieren. Ändern Sie den Grenzwert auf den größeren Wert Ihres größten Hintergrundbilds und konvertieren Sie ihn in B-Einheiten

3. Entfernen Sie das CSS nicht. Packen Sie es separat (nicht empfohlen):

wird über CSS-Loader und Style-Loader direkt in JS gepackt, und JS erstellt automatisch das Style-Tag, sodass der Zugriffspfad auf Das Hintergrundbild wird über den Pfad index.html aufgerufen, diese Lösung wird jedoch nicht empfohlen. Dies führt dazu, dass js zu groß wird, und es wird aus demselben Grund wie bei zu großen Bildern nicht empfohlen, in Base64 zu konvertieren.

4. Verwenden Sie absolute Pfade für Bildadresspfade (Empfehlung)

Vorschlag: Verwenden Sie kleine Bilder als Hintergrundbilder und verwenden Sie img-Tags für große Bilder. Zunächst müssen wir einige Unterschiede zwischen Hintergrundbildern und Bildimg klären. Soweit jeder weiß, werden Hintergrundbilder zum Ändern von Webseiten verwendet. Für Dinge, die nichts mit dem eigentlichen Inhalt zu tun haben, verwenden Sie Hintergrundbilder. Wenn irgendetwas mit Inhalten das img-Tag verwenden sollte, zählt es als Inhalt der Webseitenstruktur. Die geänderten Bilder sollten so klein wie möglich sein. Sie können auch Bildkomprimierung und andere Strategien verwenden, um die Größe der Bilder zu reduzieren.

Nicht empfohlen: Der Grund, warum es nicht empfohlen wird, den Grenzwert zu ändern, liegt darin, dass die Konfiguration des URL-Loaders für die Bilder des gesamten Projekts gilt. Das Ändern des Grenzwerts bedeutet auch, dass die Bilder mit dem img Das Tag im HTML wird ebenfalls in base64 konvertiert. Der Nachteil der Konvertierung in base64 besteht darin, dass die Originalgröße des Bildes zunimmt. Wenn Sie ein großes Bild in base64 konvertieren, wird Ihre js-Datei zu groß , wodurch die Zeit zum Laden von js erhöht wird.

Über base64

Vorteile: base64 ist ein Bild, das durch eine Zeichenfolge von String-Codes dargestellt wird. Es wird beim Laden der Seite oder js zusammen geladen, wodurch Bildreferenzen reduziert werden einzelne http-Anfrage. Studenten, die sich mit der Optimierung der Webseitenleistung auskennen, wissen, dass die Einrichtung jeder HTTP-Anfrage eine gewisse Zeit in Anspruch nimmt. Bei kleinen Bildanfragen kann die Einrichtungszeit der HTTP-Anfrage länger sein als der Bilddownload selbst. Daher ist die Base64-Transkodierung kleiner Bilder ein Mittel zur Optimierung von HTTP-Anfragen und zur Gewährleistung einer beschleunigten Seitenwiedergabe.

Nachteile: Der Nachteil von base64 ist wie bereits erwähnt: Es erhöht die Größe des Bildes selbst. Bei kleinen Bildern kann die Vergrößerung, die zu einer Zunahme der js-Anfragen führt, die Einrichtungszeit vollständig ausgleichen einer weiteren http-Anfrage. Der Kompromiss ist kostengünstig. Aber für große Bilder lohnt sich dieser Kompromiss nicht.

Geben Sie ein Beispiel

Beispiel: (Die folgenden Daten werden alle beiläufig simuliert, schauen Sie sich einfach die Idee an)
Wenn die http-Erstellungszeit 0,1 beträgt s Jedes Mal, wenn das Netzwerk übertragen wird, beträgt es 100 KB/s und das Volumen erhöht sich bei jeder Konvertierung in Base64 um 20 %.

1. Ein 10-KB-Bild wird über eine http-Anfrage heruntergeladen Nach der Konvertierung in Base64 beträgt die Größe 12 KB. Beim Herunterladen von js wird die Größe um 0,12 s erhöht, sodass durch die Konvertierung in Base64 die Seitenladegeschwindigkeit um 0,08 s optimiert werden kann >

2. Die Anforderungsgeschwindigkeit eines 100-KB-Bildes über http beträgt 1,1 Sekunden. Nach der Konvertierung in Base64 beträgt die Größe 120 KB, wodurch sich die Größe von js um 120 KB erhöht, sodass sich die Ladezeit um 1,2 s verlängert. Auf diese Weise berechnet, kann die Seitenladegeschwindigkeit nach der Konvertierung in Base64 nicht optimiert werden, sondern die Ladegeschwindigkeit wird um 0,1 s verlangsamt, was nicht kosteneffektiv ist.

Denken:

Während des Entwicklungsprozesses müssen wir neben der Bewältigung der Ladegeschwindigkeit auch die Frage berücksichtigen paralleles Herunterladen. Wenn sie sich alle in einem JS befinden, werden die Bilder erst heruntergeladen, wenn das JS heruntergeladen wurde. Das heißt, nach der Konvertierung in Base64 kann davon ausgegangen werden, dass die JS und die Bilder seriell heruntergeladen werden. Mit http-Anfragen können Bilder parallel mit js heruntergeladen werden. Daher sind kleinere Bilder erforderlich, um kostengünstiger zu sein.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist PHP chinesische Website!

Verwandte Empfehlungen:

Einführung in den Konstruktions-, Verpackungs- und Veröffentlichungsprozess von Vue-Projekten

v-für in vue Methode zum Laden lokaler statischer Bilder

Vue implementiert die Funktion, Bilder zuzuschneiden und auf den Server hochzuladen

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem eines falschen Zugriffspfads nach dem Packen des Vue-Hintergrundbilds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!