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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
理解Javascript闭包
Nov 01 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
微信小程序自动客服功能
Nov 02 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
JavaScript实现密码强度实时验证
Mar 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
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
python 统计代码行数简单实例
2017/05/04 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
党员公开承诺书内容
2014/05/20 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
公司表扬信格式
2015/05/04 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
详解Vue的options
2021/05/15 Vue.js
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技