vue组件-懒加载

一、 什么是懒加载

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

二、为什么需要懒加载

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

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

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

1 2 3 4 5 6 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插件使用, 具体使用方法如下 1 npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015 1 2 3 4 5 6 7 use: [{

loader: 'babel-loader',
    options: {
      presets: [['es2015', {modules: false}]],
      plugins: ['syntax-dynamic-import']
    }
  }]

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

1、路由中配置异步组件

1 2 3 4 5 6 7 8 9 10 export default new Router({

routes: [
    {
        mode: 'history',
        path: '/my',
        name: 'my',
        component:  resolve => require(['../page/my/my.vue'], resolve),//懒加载
    },
]

}) 2、实例中配置异步组件

1 2 3 4 components: {

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

3、全局注册异步组件

1 2 3 Vue.component('mideaHeader', () => {

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

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 //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)还是需要团队交流,建立合理区分各种加载方式的组件文件夹

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

八、具体代码实现设计

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,最优化提高开发效率

直接贴上代码:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 /**

  • 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}});

} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 //页面中使用动态组件   

二、动态组件的设计

直接用即用即加的方式在实例或路由中直接配置异步组件

原文链接:segmentfault.com

上一篇:Vue源码笔记 — 数据驱动--update
下一篇:在vue和element-ui的table中实现分页复选

相关推荐

  • 🚩四年前端带你理解路由懒加载的原理

    前言 说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载的原理,怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载,最常用的是通过im...

    1 个月前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问🔗...

    2 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    3 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设...

    1 年前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 (/public/upload/e221e3db24c3f24a41062b6e4e389df8) 2、出现问题的代码点 (/publ...

    2 个月前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    1 年前
  • 鼠标移入移出效果 -- jQuery/Vue版

    元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接(http://www.bestvist.com/p/56) ...

    2 年前

官方社区

扫码加入 JavaScript 社区