zoukankan      html  css  js  c++  java
  • Vue路由懒加载

    Vue路由懒加载

    一、为什么要懒加载

    • 项目到后期,JavaScript 包会变得非常大,影响页面加载。

    • 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。

    二、使用

     常用的懒加载方式有两种:即使用vue异步组件ES中的import

    1. 未使用懒加载:
    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'  //未用懒加载
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld
        }
      ]
    })
    
    1. vue异步组件实现懒加载

     方法如下:component:resolve=>(require(['需要加载的路由的地址']),resolve)

    import Vue from 'vue'
    import Router from 'vue-router'
    /* 此处省去之前导入的HelloWorld模块 */
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: resolve=>(require(["@/components/HelloWorld"],resolve))
        }
      ]
    })
    
    1. ES 提出的import方法,(最常用)
    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: () => import('@/components/HelloWorld')
        }
      ]
    })
    

    组件懒加载:同理(略)

  • 相关阅读:
    echarts各个配置项详细说明总结
    享元模式
    观察者模式
    策略模式
    桥接模式
    适配器模式
    建造者模式
    原型模式
    单例模式
    Java8新特性——集合底层源码实现的改变
  • 原文地址:https://www.cnblogs.com/proper128/p/13621277.html
Copyright © 2011-2022 走看看