Vue代码分割懒加载的实现方法


Posted in Javascript onNovember 23, 2017

什么是懒加载

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

为什么需要懒加载

在单页应用中,如果没有应用懒加载,运用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']
}
}]

引言

而在webpack > 2的时代,vue做代码分割懒加载更加的easy,不需要loader,不需要require.ensure。

import解决一切。

分割层级

Vue代码分割懒加载包含如下几个层级:

      1、 组件层级分割懒加载

      2、 router路由层级

      3、 Vuex 模块

组件层级代码分割

//全局组件
Vue.component('AsyncComponent', () => import('./AsyncComponent'))

//局部注册组件
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent')
 }
})

// 如果不是default导出的模块
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent').then({ AsyncComponent }) => AsyncComponent
 }
})

路由层级代码分割

const AsyncComponent= () => import('./AsyncComponent')

new VueRouter({
 routes: [
 { path: '/test', component: AsyncComponent}
 ]
})

Vuex 模块代码分割,vuex中有动态注册模块方法,同时也是加上import

const store = new Vuex.Store()

import('./store/test').then(testModule => {
 store.registerModule('test', testModule)
})

总结

在一般项目中,我们按照router和components层面分割(或者只使用router分割)就足够了。大型项目可能三者都会用到,但用法都很简单,不是么?

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
绑定回车enter事件代码
May 18 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
初探js和简单隐藏效果的实例
Nov 23 #Javascript
详解如何在angular2中获取节点
Nov 23 #Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 #Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 #Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 #Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 #Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 #Javascript
You might like
php自定义的格式化时间示例代码
2013/12/05 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
js运动应用实例解析
2015/12/28 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
对python中的logger模块全面讲解
2018/04/28 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
模具专业求职信
2014/06/26 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
党校党性分析材料
2014/12/19 职场文书
导游词开场白
2015/01/31 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
2016年教师节慰问信
2015/12/01 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android