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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
js闭包学习心得总结
Apr 17 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
js实现随机8位验证码
Jul 24 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
一分钟学会JavaScript中的try-catch
Dec 14 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php学习之流程控制实现代码
2011/06/09 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
Javascript访问器属性实例分析
2014/12/30 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
python计算书页码的统计数字问题实例
2014/09/26 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
python实现杨辉三角思路
2017/07/14 Python
python实现图片转字符小工具
2019/04/30 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
群众路线剖析材料
2014/02/02 职场文书
小区消防演习方案
2014/02/21 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
联欢会开场白
2015/06/01 职场文书
电影建党伟业观后感
2015/06/01 职场文书
国情备忘录观后感
2015/06/04 职场文书
小学运动会报道稿
2015/07/22 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js