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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
jQuery实现大图轮播
Feb 13 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
webpack5 联邦模块介绍详解
Jul 08 Javascript
详解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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php实现telnet功能示例
2014/04/08 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
php微信开发之谷歌测距
2018/06/14 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
js性能优化技巧
2015/11/29 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
办理信用卡工作证明
2014/09/30 职场文书
中小学生学籍证明
2014/10/25 职场文书
八一建军节慰问信
2015/02/14 职场文书
会议通知格式范文
2015/04/15 职场文书
公司表扬稿范文
2015/05/05 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python