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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
JavaScript 拖拉缩放效果
Dec 10 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
整理关于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&amp;&amp;mysql)四
2006/10/09 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
事业单位年度考核个人总结
2015/02/12 职场文书
2015年酒店工作总结
2015/04/28 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
Redis入门教程详解
2021/08/30 Redis