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 相关文章推荐
jquery动态添加删除一行数据示例
Jun 12 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
微信小程序之发送短信倒计时功能
Aug 30 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 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
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Python数据正态性检验实现过程
2020/04/18 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
python从PDF中提取数据的示例
2020/10/30 Python
Python使用Pygame绘制时钟
2020/11/29 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
促销活动策划方案
2014/01/12 职场文书
电力培训心得体会
2014/09/02 职场文书
见习报告怎么写
2014/10/31 职场文书
董事长致辞
2015/07/29 职场文书
门卫管理制度范本
2015/08/05 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL