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 相关文章推荐
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php5 mysql分页实例代码
2008/04/10 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
电脑租赁公司创业计划书
2014/01/08 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
国际金融专业自荐信
2014/07/05 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
党员自评材料范文
2014/12/17 职场文书
孔庙导游词
2015/02/04 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
写好Python代码的几条重要技巧
2021/05/21 Python