博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue.js2.0 懒加载实现
阅读量:5831 次
发布时间:2019-06-18

本文共 632 字,大约阅读时间需要 2 分钟。

一、 什么是懒加载

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

二、为什么需要懒加载

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

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

配合webpack支持的异步加载方法有如下几种:

  • resolve => require([URL], resolve), 支持性好
  • () => system.import(URL) , webpack2官网上已经声明将逐渐废除, 不推荐使用
  • () => import(URL), webpack2官网推荐使用, 属于es7范畴, 需要配合babelsyntax-dynamic-import插件使用
npm install --save-dev bbabel-plugin-syntax-dynamic-import

1.路由配置是组件引入改成懒加载模式:

2.实例中配置异步组件

3、全局注册异步组件

 

run  build生成文件:

 

这是之前的:

发现会把mindex.js拆开,在不同的页面加载:

实际试了一下访问,也没问题,确实是在不同的页面分别加载;

转载于:https://www.cnblogs.com/Julian-Chen/p/8316999.html

你可能感兴趣的文章
Tomcat性能调优
查看>>
Android自学--一篇文章基本掌握所有的常用View组件
查看>>
灰度图像和彩色图像
查看>>
FreeMarker-Built-ins for strings
查看>>
argparse - 命令行选项与参数解析(转)
查看>>
修改上一篇文章的node.js代码,支持默认页及支持中文
查看>>
我理想中的前端工作流
查看>>
Chrome 广告屏蔽功能不影响浏览器性能
查看>>
Android状态栏实现沉浸式模式
查看>>
原创]windows server 2012 AD架构试验系列 – 16更改DC计算机名
查看>>
表格排序
查看>>
java只能的round,ceil,floor方法的使用
查看>>
新开的博客,为自己祝贺一下
查看>>
【CQOI2011】放棋子
查看>>
采用JXL包进行EXCEL数据写入操作
查看>>
一周总结
查看>>
将txt文件转化为json进行操作
查看>>
线性表4 - 数据结构和算法09
查看>>
uva-317-找规律
查看>>
我的2014-相对奢侈的生活
查看>>