vue代码分割的实现(codesplit)


Posted in Javascript onNovember 13, 2018

在vue单页应用中,若不做任何处理,所有vue文件会打包为一个文件,这个文件非常的大,造成网页在首次进入时比较缓慢。做了代码分割后,会将代码分离到不同的bundle中,然后进行按需加载这些文件,能够提高页面首次进入的速度,网站性能也能够得到提升。

一、未分割时浏览器加载js的情况

vue代码分割的实现(codesplit) 

可以看到,只有一个app.js,大小为595kb,若在实际的大型项目中,这个大小会更大

二、做了代码分割后浏览器加载js情况

vue代码分割的实现(codesplit) 

发现多了一个js文件,且app.js大小也变小了,下面看看点击到其他页面时加载情况

vue代码分割的实现(codesplit) 

点到其他页面后,页面会依次加载当前页面的js

三、代码中如何使用

该demo中使用的vue版本号为2.5.2,不同版本的使用方式可能会有所不同

1、首先,看一下路由按需加载的做法

下面是修改前的代码

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import page1 from '@/page/page1'
import page2 from '@/page/page2'
import page3 from '@/page/page3'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  },
  {
   path: '/page1',
   name: 'page1',
   component: page1
  },
  {
   path: '/page2',
   name: 'page2',
   component: page2
  },
  {
   path: '/page3',
   name: 'page3',
   component: page3
  }
 ]
})

此时,我们只需将

import page1 from '@/page/page1'

改为

const page1 = () => import('@/page/page1')

这样,我们在切换路由时便达到按需加载了,怎么样,是不是很简单

2、在组件中按需加载其他组件

我们还是先来看看修改前的代码,此时引用组件的方式为传统正常的方式

import vOther from '@/components/other'
export default {
  components: {
    vOther
  }
}

我们只需做如下修改,便能达到我们想要的效果,将

import vOther from '@/components/other'

改为

const vOther = () => import('@/components/other')

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
【消息提示组件】,兼容IE6/7&&FF2
Sep 04 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 #Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 #Javascript
checkbox在vue中的用法小结
Nov 13 #Javascript
React父子组件间的传值的方法
Nov 13 #Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 #Javascript
详解如何用typescript开发koa2的二三事
Nov 13 #Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 #Javascript
You might like
php发送post请求的三种方法
2014/02/11 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
python 获取图片分辨率的方法
2019/01/08 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
大整数数相乘的问题
2012/07/22 面试题
婚礼主持词
2014/03/13 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
redis实现排行榜功能
2021/05/24 Redis