Detaillierte Erläuterung von Lazy-Loading-Beispielen für Vue-Routing

In diesem Artikel wird hauptsächlich die Implementierungsmethode des verzögerten Ladens des Vue-Routings vorgestellt. Wir können die Komponenten, die verschiedenen Routen entsprechen, in verschiedene Codeblöcke aufteilen und dann die entsprechenden Komponenten laden, wenn auf die Route zugegriffen wird. Ich hoffe, es hilft allen.

1. Komponente kann eine Pfeilfunktion sein, wir können dynamische Importsyntax verwenden, um Code-Chunking-Punkte zu definieren

2. Wenn Sie es sehen möchten das Netzwerk Zum Namen der dynamisch geladenen Komponente können Sie webpackChunkName hinzufügen;

3. Gleichzeitig chunkFileName

Code

// router里面的index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'home',
   /* 
    * 使用动态组件，component可以是一个箭头函数
    * @表示src目录
    * 如果想在network里面看到动态加载的组件名字，可以加webpackChunkName，同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName
    * network里面动态加载模块名称
    */
   
   component: () => import(/* webpackChunkName: 'home' */'@/pages/Homes')
  
   
  },
  {
   path: '/todos',
   name: 'Todos',
   component: () => import(/* webpackChunkName: 'todo' */'@/pages/Todos')
  }
 ]
})

Beachten Sie, dass @ oben das aktuelle src-Verzeichnis darstellt. Weitere Informationen finden Sie in der Konfiguration von Webpack

webpack.base.conf.js里面添加 chunkFilename: '[name].js'

output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 // 需要配置的地方
 chunkFilename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
}

Analyse

Erstellt zwei Komponenten, Home und Todos, mithilfe von Routing Lazy Loading. Nach der Konfiguration. Wir haben npm run dev ausgeführt, um das Projekt auszuführen. Nachdem wir das Netzwerk geöffnet und aktualisiert haben, werden wir feststellen, dass der Name mit dem oben definierten webpackChunkName übereinstimmt wird todo.js laden. Dies ist eine einfache Anwendung des verzögerten Ladens von Routen.

Andere

Im Eintrag des Projekts in main.js können wir die Vorlagensyntax verwenden, oder wir können die Renderfunktion

Verwandte Empfehlungen:

new Vue({
 el: '#app',
 router,
 components: { App },
 /*
 * 这里使用的template的语法
 * 也可以使用render函数,直接return一个html结构
 */
 // template: &#39;<App/>&#39;
 render() {

  return (
   <p>
    <App></App>
   </p>
  )
 } 
})

Das Prinzip und die Implementierung des verzögerten Ladens von jquery

Verwendung Lazy Images in Vue Laden Sie das Vue-Lazyload-Plug-In

Über Vue-Codeaufteilung und Lazy Loading

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Lazy-Loading-Beispielen für Vue-Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!