vue2组件实现懒加载浅析


Posted in Javascript onMarch 29, 2017

vue2组件实现懒加载浅析

一、 什么是懒加载

懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。

二、为什么需要懒加载

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

三、如何与webpack配合实现组件懒加载

1、在webpack配置文件中的output路径配置chunkFilename属性

output: {

    path: resolve(__dirname, 'dist'),

    filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',

    chunkFilename: 'chunk[id].js?[chunkhash]',

    publicPath: options.dev ? '/assets/' : publicPath

  },

chunkFilename路径将会作为组件懒加载的路径

2、配合webpack支持的异步加载方法

  • resolve => require([URL], resolve), 支持性好
  • () => system.import(URL) , webpack2官网上已经声明将逐渐废除, 不推荐使用
  • () => import(URL), webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用, 具体使用方法如下
npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015
use: [{

    loader: 'babel-loader',

    options: {

     presets: [['es2015', {modules: false}]],

     plugins: ['syntax-dynamic-import']

    }

   }]

四、具体实例中实现懒加载

1、路由中配置异步组件

export default new Router({

  routes: [

    {

      mode: 'history',

      path: '/my',

      name: 'my',

      component: resolve => require(['../page/my/my.vue'], resolve),//懒加载

    },

  ]

})

2、实例中配置异步组件

components: {

    historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载

    //historyTab: () => import('../../component/historyTab/historyTab.vue')

  },

3、全局注册异步组件

Vue.component('mideaHeader', () => {

  System.import('./component/header/header.vue')

})

五、配置异步组件实现懒加载的问题分析

1、多次进出同一个异步加载页面是否会造成多次加载组件?

答:否,首次需要用到组件时浏览器会发送请求加载组件,加载完将会缓存起来,以供之后再次用到该组件时调用

2、在多个地方使用同一个异步组件时是否造成多次加载组件?如:

//a页面

export default {

  components: {

    historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载

  },

}
//b页面

export default {

  components: {

    historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载

  },

}

答:否,理由同上

3、如果在两个异步加载的页面中分别同步与异步加载同一个组件时是否会造成资源重用? 如:

//a页面
import historyTab from '../../component/historyTab/historyTab.vue';
export default {
  components: {
    historyTab
  },
}

//b页面
export default {
  components: {
    historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载
  },
}

答: 会, 将会造成资源重用, 根据打包后输出的结果来看, a页面中会嵌入historyTab组件的代码, b页面中的historyTab组件还是采用异步加载的方式, 另外打包chunk;

解决方案: 组件开发时, 如果根页面没有导入组件的情况下,而是在其他异步加载页面中同时用到组件, 那么为实现资源的最大利用,在协同开发的时候全部人都使用异步加载组件

4、在异步加载页面中载嵌入异步加载的组件时对页面是否会有渲染延时影响?

答:会, 异步加载的组件将会比页面中其他元素滞后出现, 页面会有瞬间闪跳影响;

解决方案:因为在首次加载组件的时候会有加载时间, 出现页面滞后, 所以需要合理的进行页面结构设计, 避免首次出现跳闪现象;

六、懒加载的最终实现方案

1、路由页面以及路由页面中的组件全都使用懒加载

优点:(1)最大化的实现随用随载

 (2)团队开发不会因为沟通问题造成资源的重复浪费

缺点:(1)当一个页面中嵌套多个组件时将发送多次的http请求,可能会造成网页显示过慢且渲染参差不齐的问题

2、路由页面使用懒加载, 而路由页面中的组件按需进行懒加载, 即如果组件不大且使用不太频繁, 直接在路由页面中导入组件, 如果组件使用较为频繁使用懒加载

优点:(1)能够减少页面中的http请求,页面显示效果好

缺点:(2)需要团队事先交流, 在框架中分别建立懒加载组件与非懒加载组件文件夹

3、路由页面使用懒加载,在不特别影响首页显示延迟的情况下,根页面合理导入复用组件,再结合方案2

优点:(1)合理解决首页延迟显示问题

        (2)能够最大化的减少http请求, 且做其他他路由界面的显示效果最佳

缺点:(1)还是需要团队交流,建立合理区分各种加载方式的组件文件夹

七、采用第三种方案进行目录结构设计

vue2组件实现懒加载浅析

八、具体代码实现设计

1、路由设计:

import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);

export default new Router({
  routes: [
    {
      mode: 'history',
      path: '/home',
      name: 'home',
      component: resolve => require([URL], resolve),//懒加载
      children: [
        {
          mode: 'history',
          path: '/home/:name',
          name: 'any',
          component: resolve => require(['../page/any/any.vue'], resolve),//懒加载
        },
      ]
    },
    {
      mode: 'history',
      path: '/store',
      name: 'store',
      component: resolve => require(['../page/store/store.vue'], resolve),//懒加载,
      children: [
        {
          mode: 'history',
          path: '/store/:name',
          name: 'any',
          component: resolve => require(['../page/any/any.vue'], resolve),//懒加载
        },
      ]
    },
    {
      mode: 'history',
      path: '/my',
      name: 'my',
      component: resolve => require(['../page/my/my.vue'], resolve),//懒加载,
      children: [
        {
          mode: 'history',
          path: '/my/:name',
          name: 'any',
          component: resolve => require(['../page/any/any.vue'], resolve),//懒加载
        },
      ]
    },
  ]
})

(1)首层的路由根组件分别对应的tab页面

(2)根目录后跟着各个子路由页面,子路由采用动态路由配合路由的编程式导航再加上vuex,最优化提高开发效率

直接贴上代码:

/**

 * Created by ZHANZF on 2017-3-20.

 */

//vuex配置

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({

  state: {

    //路由组件存储器

    routers: {}

  },

  getters: {

    routers: state => {

      return state.data;

    }

  },

  mutations: {

    //动态增加路由

    addRouter: (state, data) => {

      state.routers = Object.assign({}, state.routers, {

        [data.name]: data.component

      });

    }

  },

  actions: {

    acMethods({commit}) {

 

    }

  },

})

 

//根目录中注册路由组件

window.midea = {

  registerRouter(name, component) {

    Store.commit('addRouter', {

      name: name,

      component: component

    })

  }

};//页面使用路由导航 

openAnyPage() {
  midea.registerRouter('module', resolve => {require(['../module/module.vue'], resolve)});//懒加载
  this.$router.push({path: '/home/module', query: {title: this.title}});
}
//页面中使用动态组件 

<template>  

 <component :is="currentRouter" :moduleName="title">

</component> 

</template>

<script src="./any.js">

export default {

  data () {

    return {

      routeName: '',

      currentRouter: '',

      title: '',

    }

  },

  created() {

    this.routeName = this.$route.params.name;

    this.title = this.$route.query.title;

    this.currentRouter = this.$store.state.routers[this.routeName];

  },

  methods: { 

  }

}

</script>

vue2组件实现懒加载浅析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
js模块加载方式浅析
Aug 12 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 #Javascript
如何使用Bootstrap创建表单
Mar 29 #Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 #Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 #Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
You might like
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP多进程简单实例小结
2019/11/09 PHP
使用js修改客户端注册表的方法
2013/08/09 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python中pygame模块用法实例
2014/10/09 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Django框架反向解析操作详解
2019/11/28 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
Python自动化操作实现图例绘制
2020/07/09 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
机关单位动员会主持词
2014/03/20 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
预备党员个人总结
2015/02/14 职场文书
法定代表人身份证明书
2015/06/18 职场文书
勤俭节约主题班会
2015/08/13 职场文书
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis