So implementieren Sie das verzögerte Laden des Vue-Routings

In diesem Artikel wird hauptsächlich die Implementierungsmethode des verzögerten Ladens des Vue-Routings vorgestellt. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

Dieser Artikel stellt das verzögerte Laden von Routen in Vue vor und teilt es mit allen. Die Details sind wie folgt:

Wir können die Komponenten, die verschiedenen Routen entsprechen, in verschiedene Codeblöcke unterteilen , und dann, wenn die Route ist Die entsprechende Komponente wird nur geladen, wenn darauf zugegriffen wird.

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

// 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')
  }
 ]
})

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

Andere

verwenden

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

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

Ein einfaches Beispiel für den lokalen Vorschaueffekt hochgeladener Bilder, der von jQuery implementiert wird

Einige häufige Probleme in JavaScript-Interviews Falsche Punkte aussortiert

vue axios request interception example code

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das verzögerte Laden des Vue-Routings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!