Wie implementiert man das asynchrone Laden von Komponenten in vue+webpack?

Im Folgenden werde ich Ihnen eine Methode zur Implementierung des asynchronen Ladens von Komponenten mit vue+webpack vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Update 8.9: Als ich vorher zu csdn wechseln wollte, konnte ich den Blog aufgrund des Problems mit dem Einladungscode nicht übertragen, also bin ich heute in den Blog Park gegangen, um festzustellen, dass csdn den Artikel verschoben hat Ich muss diesen Artikel korrigieren.

Als ich diesen Artikel schrieb, war ich neu bei Vue und war daher etwas verwirrt, als ich daran herumbastelte.

----------------/*Sie können Folgendes überspringen*/------------- ---

Es hat lange gedauert, etwas zu schaffen, das ursprünglich sehr einfach war.

Das 1.vue-Dokument enthält nur ein Beispiel für das Laden von Komponentendefinitionsinhalten durch Vue.component('comp_name',function(resolve,reject){}) über Ajax im Rückruf, aber jetzt bin ich daran gewöhnt, Komponenten zu schreiben Wie mache ich das in .vue-Dateien, wenn ich auf die Route klicke, um .vue zu erhalten?

2. Der Coding-Split von Webpack unterstützt die CommonJS/AMD-Syntax, das heißt, es gibt verschiedene Implementierungen. Ich habe viele verwirrende Fälle im Internet überprüft und mich schließlich für zwei Schreibweisen entschieden:

commonjs-Syntax: const Setting = Auflösung => Resolve(require(' ./components /setting.vue')),'setting');

So schreiben Sie das Dokument: lösen =>require(['./components/setting.vue')],resolve); //Verzögertes Laden

Zu dieser Zeit habe ich zusammen mit dem Routing geübt, das ich auf Github gesehen habe. Ensure ist die Syntax von Webpack, die im Require angegeben ist .Stellen Sie sicher, dass ein Teil ausgeschnitten und verpackt wird. Fügen Sie einfach das Element chunkFileName zu webpack.config.js hinzu. Die drei Parameter von require.ensure sind: abhängige URL, Rückruf und benutzerdefinierter Blockname.

Tatsächlich besteht der Kern der Codeaufteilung darin, die von Ihnen benötigten Module zu trennen und sie separat zu packen. Bei Verwendung initiiert der Browser die asynchrone Erfassung und fügt sie über scriptdom in den Kopf ein. Als ich es selbst ausprobiert habe, wurden jedes Mal, wenn ich eine asynchrone Komponente erhalte, zwei Tags in den Kopf eingefügt, ein Skript und ein Yigestyle, da die .vue-Datei schließlich in HTML, CSS und JS analysiert wird.

PS: Tatsächlich verfügt der Beispielcode auf der offiziellen Webpack-Website zunächst nicht über die Schreibmethode „require.ensure“. Ich konnte im Internet keine Erklärung finden. Ich habe die Funktion „require.ensure“ nach dem Packen und Kompilieren von Webpacks gefunden ist eine thenable-Instanz. Der Rückruf von require.ensure wird in _webpack_require_.e.then (fn) platziert. Es ist sofort klar, dass die Syntax von Webpack selbst eine Promise-Instanz sein sollte, aber auf die oben beschriebene Weise erhält man die Vue-Komponente. Da „require.ensure“ eine gekapselte Syntax ist, müssen wir „resolve“ an die übergeordnete Funktion übergeben, sie abrufen und über die Bereichskette im Rückruf von „require.ensure“ aufrufen. Dies zeigt auch, dass die Auflösungsfunktion nicht im Funktionsparameter des Versprechens enthalten sein muss und ihre Erscheinungsposition flexibel festgelegt werden kann. Wie in der ES6-Einführung von Lehrer Ruan Yifeng erwähnt, wird die Auflösungsfunktion von der js-Engine bereitgestellt und nicht müssen selbst bereitgestellt werden.

------------------/*Sie können das Obige überspringen*/----------- - ------

Erstens ist die Verwendung asynchroner Komponenten nicht so kompliziert, wie Sie dachten, als Sie zum ersten Mal damit in Kontakt kamen.

1. Wenn Sie die offizielle Website-Methode anwenden:

HTML:

<input type="button" @click="showchild" value="show"> //点击按钮后，show为真,先获取child组件，再渲染p内容
<p id="contain" v-if="show">
 <child></child>
 </p>

JS:

//...
data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   show:false
  }
 },
 methods: {
  showchild:function(){
   this.show=true;
   }
 },
 components: {
   'child': function(resolve) {
    require(['./components/child.vue'], resolve);
 }

*Hinweis: Ignorieren Sie beim Laden asynchroner Komponenten nicht die .vue-Datei nach dem Komponentennamen.

Dieses Beispiel sollte intuitiver sein. Nachdem Sie auf die Schaltfläche geklickt haben, wird der boolesche Wert der Variablen show in true geändert. Da es sich bei child.vue um eine asynchrone Komponente handelt, wird die Komponente zuerst über Ajax abgerufen und dann gerendert.

In vielen Fällen werden asynchrone Komponenten mit Vue-Router verwendet, um Ansichten zu wechseln. Tatsächlich kann derzeit jede Syntax verwendet werden.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Wie verwende ich Dom-Elemente in jQuery?

Was sind die häufig verwendeten Array-Funktionen in js?

Informationen zur Verwendung des Datepickers in vue2.0

Das obige ist der detaillierte Inhalt vonWie implementiert man das asynchrone Laden von Komponenten in vue+webpack?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!