zoukankan      html  css  js  c++  java
  • vue的路由懒加载、组件懒加载

    为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。

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

    一、 路由懒加载
    1、未用懒加载,vue中路由代码如下
     1 import Vue from 'vue'
     2 import Router from 'vue-router'
     3 import HelloWorld from '@/components/HelloWorld'
     4 
     5 Vue.use(Router)
     6 
     7 export default new Router({
     8   routes: [
     9     {
    10       path: '/',
    11       name: 'HelloWorld',
    12       component: HelloWorld
    13     }
    14   ]
    15 })

    2、 ES 提出的import方法,(------最常用------)

    const HelloWorld = () => import('@/components/HelloWorld')
     1 import Vue from 'vue'
     2 import Router from 'vue-router'
     3 
     4 Vue.use(Router)
     5 
     6 const HelloWorld = () => import('@/components/HelloWorld')
     7 export default new Router({
     8   routes: [
     9     {
    10       path: '/',
    11       name: 'HelloWorld',
    12       component: HelloWorld
    13     }
    14   ]
    15 })

    3、异步加载vue组件实现懒加载

    component: resolve => require(['@/components/HelloWorld'], 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)
        }
      ]
    })

     有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

    1 const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
    2 const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
    3 const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
    二、组件懒加载
    1、 默认写法
     1 <template>
     2   <div class="hello">
     3   <One-com></One-com>
     4   1111
     5   </div>
     6 </template>
     7 
     8 <script>
     9 import One from './one'
    10 export default {
    11   components:{
    12     "One-com":One
    13   },
    14   data () {
    15     return {
    16       msg: 'Welcome to Your Vue.js App'
    17     }
    18   }
    19 }
    20 </script>

    2、 ES的import写法

     1 <template>
     2   <div class="hello">
     3   <One-com></One-com>
     4   1111
     5   </div>
     6 </template>
     7 
     8 <script>
     9 const One = ()=>import("./one");
    10 export default {
    11   components:{
    12     "One-com":One
    13   },
    14   data () {
    15     return {
    16       msg: 'Welcome to Your Vue.js App'
    17     }
    18   }
    19 }
    20 </script>

    3、 require异步加载组件的方式

     1 <template>
     2   <div class="hello">
     3   <One-com></One-com>
     4   1111
     5   </div>
     6 </template>
     7 
     8 <script>
     9 export default {
    10   components:{
    11     "One-com":resolve=>(['./one'],resolve)
    12   },
    13   data () {
    14     return {
    15       msg: 'Welcome to Your Vue.js App'
    16     }
    17   }
    18 }
    19 </script>


  • 相关阅读:
    【Language】 TIOBE Programming Community Index for February 2013
    【diary】good health, good code
    【web】a little bug of cnblog
    【Git】git bush 常用命令
    【web】Baidu zone ,let the world know you
    【diary】help others ,help yourself ,coding is happiness
    【Git】Chinese messy code in widows git log
    【windows】add some font into computer
    SqlServer启动参数配置
    关于sqlserver中xml数据的操作
  • 原文地址:https://www.cnblogs.com/shine-lovely/p/14001019.html
Copyright © 2011-2022 走看看