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的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 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 has encountered an Access Violation
2007/01/15 PHP
php生成文件
2007/01/15 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
JS模拟多线程
2007/02/07 Javascript
TopList标签和JavaScript结合两例
2007/08/12 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
如何利用python进行时间序列分析
2020/08/04 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
有个性的自我评价范文
2013/11/15 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
邀请函样本
2015/02/02 职场文书
安全伴我行主题班会
2015/08/13 职场文书
小学班主任研修日志
2015/11/13 职场文书
python实现会员信息管理系统(List)
2022/03/18 Python