• Vue性能优化之组件按需加载(以及一些常见的性能优化方法)


      关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车!

    1、webpack2 + ES5结合开车

    没发车前,我们页面加载的js是这样的:

       

       任你随便点,你就只加载了这一个app.js文件,你所有的组件都在这里面

       准备发车:把你的路由中引入组件的方式改成这样:

        

    再来看看我们的页面上加载的js文件(开车后):

    只有当你加载了这个CityPicker组件的时候,我才引入它,也就是0.js,这就实现了异步加载,大概意思就是把我们的组件变成了一个函数,刚开始的时候它是不执行的,只有当你需要它的时候来触发它了它才会加载进来。

      

    1、webpack代码分割结合AMD规范的require

      开车前就不说了,无论你怎么挣扎,你所有的东西都在app.js里,一次性全给你加再进来,准备发车:

        发车准备:把你路由里面引入组件的形式变成这样:

      

      发车后的形态:

      

     漂亮,同样达到了我们想要的效果

    3、webpack的ensure来进行终极开车:

      简单说一下它的思想:webpack编译时,会静态的解析代码中的require.ensure(),同时将模块添加到一个分开的chunk中,新的chunk会被webpack通过jsonp来按需加载。此方法内部依赖于Promise。

      一共有三个参数:

      参数一:字符串数组,模块的依赖项,会提前进行加载,一般情况下为空。

      参数二:依赖项加载完成之后的回调函数。

      参数三:chunk名。相同chunk名的文件,所有的依赖都会被放进相同的文件束中。

      开始发车

      发车前:将你的引入组件的方式改成这样:

      

      发车后:

      

      同样实现了异步加载,并且最终要的是,City就是chunk名,相同chunk名的的文件,所有的依赖都会被放到相同的文件束中。

    异步加载可以大大的提高性能,避免不必要的资源浪费,今天关于vue的性能优化就先到这里,下课,额再补充几个Vue中性能优化的方法吧:

      1. 可以使用computed计算属性来代替一些函数方法,(函数的话每次都会调用一次,计算属性是根据它依赖的值变化了才会执行)

           2. 对于一些不需要频繁调用的形式,使用v-if来取代v-show。(v-if的话是只有它存在了才会进行渲染,而v-show是无论如何都会渲染,只不过是将它隐藏了而已)

      3. 为item设置唯一的key值。(快速精准的定位到diff);

      4. SSR(服务器端渲染);

      5. 骨架屏加载。(在数据还没来之前显示骨架屏,提高用户体验);

      6. loading图。(提高用户体验度,用户第一);

      7. 图片按需加载,图片懒加载技术。(避免不必要的资源浪费)。

    ...未完待续

  • 相关阅读:
    shell笔记
    全引用与部分引用
    R语言 EFA(探索性因子分析)
    Markdown 基本使用
    Oracle截取字符串和查找字符串
    ggplot画基本图形类型
    ggplot画图笔记
    用R语言 画条形图(基于ggplot2包)
    Git基本操作
    R语言为数据框添加列名或行名
  • 原文地址:https://www.cnblogs.com/bai1218/p/10126691.html
Copyright © 2020-2023  润新知