路由懒加载和非懒加载

非懒加载
index.js路由 
import Vue from 'vue'
import VueRouter fro 'vue-router'
import Home from '../views/Home.vue'
import SiMi from '../views/SiMi.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'
//vue项目默认开启了预加载设置：会提前加载所有的组件文件 -- 非真正的懒加载
//可以通过特殊配置来关闭预加载功能
//配置文件：vue.config.js   具体看 6
import store from '../store/index'

Vue.use(VueRouter)
const routes=[
    {
        path:'/contact',
        name:'Contact',
        component:Contact
    }，
     {
        path:'/about',
        name:'About',
        component:About    
    }，
     {
        path:'/home',
        name:'Home',               
        component:Home   
    },
    {
        path:'/',simi
        name:'SiMi',               
        component:SiMi   
    }                
]
懒加载
index.js路由 
import Vue from 'vue'
import VueRouter fro 'vue-router'

//vue项目默认开启了预加载设置：会提前加载所有的组件文件 -- 非真正的懒加载
//可以通过特殊配置来关闭预加载功能
//配置文件：vue.config.js   具体看 6
import store from '../store/index'

Vue.use(VueRouter)
const routes=[
    {
        path:'/contact',
        name:'Contact',
        //自定义数据：元数据
        meta:{
            //属性名随便起
            keepAlive:true        
        }
        component:()=>import('../views/Contact.vue')    
    }，
     {
        path:'/about',
        name:'About',
        component:()=>import('../views/About.vue')    
    }，
     {
        path:'/home',
        name:'Home',               
        component:()=>import('../views/Home.vue')    
    } ，
     {
        path:'/simi',
        name:'SiMi',               
        component:()=>import('../views/SiMi.vue')    
    }                 
]
懒加载和非懒加载的差异
//非懒加载：所有的组件文件，在打包时存储在一个文件中 -- 这个文件体积大，加载速度慢  （只有四个）
//懒加载：每个懒加载的组件都会生成自己独立的文件来存储 （有八个）
//例如：在首页加载时，懒加载方式就只需要加载首页的组件即可，其他页面在使用的时候才会进行加载
//优点：提高首页的加载速度

1. 非懒加载

1. 懒加载

vue.config.js
module.exports={
    chainWebpack:()=>{
        //删除预加载共呢个
        config.plugins.delete('prefetch')    
    }
}
//设置完后就是点谁谁加载，一个一个加载的