Explication détaillée des exemples de chargement paresseux du routage de vue

Cet article présente principalement la méthode d'implémentation de chargement paresseux du routage Vue. Nous pouvons diviser les composants correspondant aux différentes routes en différents blocs de code, puis charger les composants correspondants lors de l'accès à la route. J'espère que cela aide tout le monde.

1. le composant peut être une fonction fléchée, nous pouvons utiliser la syntaxe d'importation dynamique pour définir les points de segmentation du code

2. Si vous voulez le voir dans le réseau Au nom du composant chargé dynamiquement, vous pouvez ajouter webpackChunkName

3. En même temps, ajoutez 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')
  }
 ]
})

Notez que @ ci-dessus représente le répertoire src actuel. Pour plus de détails, veuillez vous référer à la configuration de 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

Création de deux composants, home et todos, en utilisant le chargement paresseux du routage Après la configuration, nous avons exécuté npm run dev pour exécuter le projet. Après avoir ouvert le réseau et l'avoir actualisé, nous constaterons que home.js est chargé. Nous constaterons que le nom est le même que le webpackChunkName défini ci-dessus. chargera todo.js. Il s'agit d'une utilisation simple du chargement paresseux des itinéraires.

Autres

Dans l'entrée du projet dans main.js, nous pouvons utiliser la syntaxe du modèle, ou nous pouvons utiliser la fonction de rendu

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

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

Recommandations associées :

Le principe et la mise en œuvre du chargement paresseux de jquery

Utiliser des images paresseuses in vue Chargez le plug-in vue-lazyload

À propos du fractionnement du code Vue et du chargement paresseux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!