So lösen Sie das Problem, dass die Herstellerdatei oder die Datei app.js zu groß ist, wenn Sie Vue-Pakete verwenden

In diesem Artikel wird hauptsächlich die Lösung für das Problem vorgestellt, dass die Herstellerdatei oder die app.js-Datei zu groß ist, wenn die Vue-Verpackung verwendet wird. Es ist sehr gut und hat einen gewissen Referenzwert

Dies ist das erste Mal, dass ich vue2.0 für die Entwicklung verwende. Ich habe zuvor Angular1.x verwendet. Nach dem Packen mithilfe des vue-cli-Gerüsts (Element-ui für die Benutzeroberfläche) stellte ich fest, dass die Herstellerdatei sehr groß war, fast 1 MB. . Später, nachdem ich die Informationen gelesen hatte, wurde mir klar, dass Webpack alle Bibliotheken zusammengepackt hatte, was zu einer sehr großen Datei führte.

Meine Lösung:

1. Fügen Sie die Bibliotheken, die sich nicht oft ändern, in index.html ein und importieren Sie sie über cdn, z Folgendes:

Suchen Sie dann die Datei build/webpack.base.conf.js und fügen Sie den folgenden Code in module.exports = { }

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'element-ui': 'ELEMENT',
 },

Auf diese Weise verpackt das Webpack keine vue.js-, vue-router- und element-ui-Bibliotheken. Lassen Sie mich erklären, dass ich die Einführung des Elements in main.js gelöscht habe, da ich sonst festgestellt hätte, dass die gepackte app.css immer noch das CSS des Elements packen würde und es nach dem Löschen verschwunden wäre.

Wenn Sie es dann verpacken, werden Sie feststellen, dass die Herstellerdatei viel kleiner ist~

Wenn Sie noch nicht zufrieden sind, lesen Sie bitte weiter...

2. Vue-Routing Lazy Loading (Informationen zu bestimmten Funktionen finden Sie auf der offiziellen Website, ich werde sie hier nicht vorstellen).

Zu Beginn verwenden wir möglicherweise das Routing wie folgt (router.js), sodass beim Aufrufen der Seite alle Routing-Ressourcen geladen werden. Wenn das Projekt groß ist, wird viel Inhalt geladen. und die Wartezeit wird länger sein, was zu einer schlechten Benutzererfahrung führt.

Um die Route in Module zu unterteilen und dann jedes Mal, wenn Sie eine neue Seite aufrufen, die für die Seite erforderlichen Ressourcen zu laden (dh die Route asynchron zu laden), Wir können es wie folgt verwenden (router.js):

Wenn Sie es dann verpacken, werden Sie feststellen, dass es noch viel mehr 1.xxxxx.js gibt 2. xxxxx.js usw. und seller.xxx js sind weg, sodass nur noch app.js und manifest.js übrig sind, und app.js ist immer noch sehr klein, hier etwas über 100.000.

Ich habe hier keine Kartendatei generiert, daher ist die Paketierungsgeschwindigkeit schneller und die gesamte Projektdatei ist viel kleiner (Kartendateien sind im Allgemeinen sehr groß);

Abbrechen Generieren Sie die Kartendatei, suchen Sie nach config/index.js und ändern Sie den Pfeil unten auf „Falsch“.

Ich habe gerade erst angefangen, es zu benutzen, und Unebenheiten und Unebenheiten auf dem Weg sind unvermeidlich. Ich habe auch aus den Erfahrungen vieler Senioren gelernt, also habe ich es hier aufgezeichnet, in der Hoffnung, zu helfen mehr Leute.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So lösen Sie das Problem leerer Seiten beim Öffnen des Vue-Projekts nach dem Verpacken

The Vue Das Webapp-Projekt wird über HBulider gepackt. Einführung in die native APP

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Herstellerdatei oder die Datei app.js zu groß ist, wenn Sie Vue-Pakete verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!