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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
ext监听事件方法[初级篇]
Apr 27 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
JS实现烟花爆炸效果
Mar 10 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
缅甸的咖啡简史
2021/03/04 咖啡文化
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
js单词形式的运算符
2014/05/06 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python Grid使用和布局详解
2018/06/30 Python
python redis 删除key脚本的实例
2019/02/19 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
什么是.net
2015/08/03 面试题
应届毕业生求职信
2013/11/30 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
物理学专业求职信
2014/07/04 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python