索鸟网

  1. 首页
  2. vue的路由懒加载和组件的按需加载

vue的路由懒加载和组件的按需加载


“懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。”

1、vue路由的懒加载

  • 按需加载的写法
                require(["src/xx/xxx/xx.vue"], resolve);
            }

  • 效果

按需加载会在页面第一次请求的时候,把相关路由组件块的js添加上;非按需加载则会把所有的路由组件块的js包打在一起。当业务包很大的时候建议用路由的按需加载(懒加载)。

2、vue组件的异步加载和同步加载

  • 组件的写法

       // aview: function(resolve) {
       //     require(["./a.vue"], resolve);
       // },
       // bview: function(resolve) {
       //     require(["./b.vue"], resolve);
       // }
       aview:require("./a.vue"),
       bview:require("./b.vue"),

  • 效果
    异步组件页面渲染的时候会跳动;但是同步书写不会

3、vue组件的按需加载(2种方式)

1、动态组件方式

  • 书写方式
组件里面:
 components: {
        aview: function(resolve) {
            require(["./a.vue"], resolve);
        },
        bview: function(resolve) {
            require(["./b.vue"], resolve);
        }
    },
 模板里面:
<component :is="current" :data="myData" ></component>
 data: function() {
        return {
            current: "",
            myData:"",
            show:false
        }
    },
    methods: {
        changeComponents:function(view)
        {
            if(view=="aview")
            {
                this.myData="a1000";
            }
            else
            {
                this.myData="b1000";
            }
            this.current=view;
        }
    }

*效果(会触发组件的生命周期)

2、v-if方式(强制创建和结束生命周期)

  • 书写方式
模板:
<aview v-if="show"></aview>
组件:
components: {
        aview:require("./a.vue")
    },
  • 效果

详细的路由懒加载

更需资料github

javascript vue.js

来源地址:https://segmentfault.com/a/1190000011426274 版权归作者所有!

相关教程

  • Vue懒加载

    import infiniteScroll from "vue-infinite-scroll" Vue.use(infiniteScroll) vue全局引入 <div class="grid-demo" v-if="active_tab=
  • React组件懒加载

    React组件懒加载 Web应用一个重要的优势就在于可以只加载我们想要的功能,而不必每次打开都把整个系统载入 那么,在React里我们怎样实现当用到我们需求的功能时再请求对应的组件,而不是一次性的请求全部代码呢? bundle-loader 新版的React建议我们使用bundle-loader进行代码的分离,下面我们看下它的用法: // 当你用到这个函
  • Vue.js路由懒加载[译]

    作者:Joshua Bemenderfer 原文地址: lazy-loading-routes 译者:jeneser 当你的SPA(单页应用程序)变得复杂时,打包构建后的Javascript包会变得非常大,以至于严重影响页面的加载时间。幸运的是:vue-router支持WebPack内置的异步模块加载系统。所以,那些使用较少的路由组件不必打包进bundl
  • angular按需加载的运用

    在用angular做一些比较大的项目的时候,如果像以前一样,在首页引入一大堆js文件话,无疑会造成首次加载消耗很多的时间,对用户体验非常不好,所以按需加载就应运而生了,在需要用的时候才加载,这样很高效。有些js框架可以实现,比图RequireJS ,seaJS。是一个根据需要来加载 js文件的 JavaScript框架,可避免不必要的js文件加载,提升网
  • webpack v3 结合 react-router v4 做 dynamic import — 按需加载(懒加载)

    为什么要做dynamic import? dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等。总之,就是在SPA,把JS代码分成N个页面份数的文件,不在用户刚进来就全部引入,而是等用户跳转路由的时候,再加载对应的JS文件。这样做的好处就是加速首屏显示速度,同时也减少了资源的浪费。 为什么选择
  • 不要滥用懒加载

    写代码是一种习惯的养成,一种生活的态度。 有一次同事看着我写的代码说,你为什么要这么写啊? 我看了一下,原来是在 ViewController 和 Cell 里初始化视图,还有数据模型数组的时候,我都是用的懒加载(Lazy-Load)。 是啊,我为什么这么喜欢用懒加载来实例化一个属性呢? 以前学 iOS 开发的时候, 觉得懒加载可以延迟加载,需要的时候
  • 函数节流和图片懒加载

    导读 这篇文章中主要介绍一下函数节流,然后给了一个图片懒加载的例子,说图片懒加载的时候顺带提了下怎么使用JS获取页面的宽高,卷上去的长度等。参考来源主要是《JavaScript高级程序设计》。 函数节流 浏览器的DOM操作比起非DOM交互需要更多的内存和cpu时间,连续过多的DOM操作可能会导致浏览器挂起甚至崩溃。比如使用onresize,onscrol
  • lozad.js:懒加载神器

    Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的懒加载器,其能够被用于进行图片、iframe 等多种形式的元素。通过gzip压缩过后,仅仅535字节大小,相对于常用的jquery.lazyload.js来说,lozad.js实力碾压,虽然jquery.lazylo