vue代码分割的实现(codesplit)

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

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

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

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

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

点到其他页面后,页面会依次加载当前页面的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')

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

(0)

相关推荐

  • Vue代码分割懒加载的实现方法

    什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { path: reso

  • vue代码分割的实现(codesplit)

    在vue单页应用中,若不做任何处理,所有vue文件会打包为一个文件,这个文件非常的大,造成网页在首次进入时比较缓慢.做了代码分割后,会将代码分离到不同的bundle中,然后进行按需加载这些文件,能够提高页面首次进入的速度,网站性能也能够得到提升. 一.未分割时浏览器加载js的情况 可以看到,只有一个app.js,大小为595kb,若在实际的大型项目中,这个大小会更大 二.做了代码分割后浏览器加载js情况 发现多了一个js文件,且app.js大小也变小了,下面看看点击到其他页面时加载情况 点到其他

  • 关于Vue代码可读性的几点建议

    目录 一.善用组件让代码更有条理性 1. 提取UI组件 2.按模块提取业务组件 3.按功能提取功能组件 二.利用v-bind使组件的属性更具有可读性 三.利用attrs与attrs与listeners来封装第三方组件 1.$attrs 2.$listeners 前言: 近来入坑了一个Vue项目,感觉掉进了祖传屎山中,可读性极差,更别说可维护性了.故借此专栏提几点关于Vue代码可读性的建议,觉得有用的点个赞,觉得建议不合理的发表评论批评一下,有更好的建议欢迎发表评论补充一下. 一.善用组件让代码更

  • vue实现分割验证码效果

    本文实例为大家分享了vue实现分割验证码效果的具体代码,供大家参考,具体内容如下 注:该代码存在问题,因为我maxlength =4 ,input 的宽度跟屏幕同宽,所以当我input 里面的length == 4 的时候,我的光标会超出屏幕,所以我在length == 4 的时候做了一个把光标放到第三个的处理,这种虽用户体验不好,也解了length==4的时候整个布局乱了的燃眉之急 上UI 图 上代码: vue <template>   <div>     <v-main

  • splitChunks精细控制代码分割降低包大小

    目录 背景 问题测验 代码分割的三种方式 splitChunks 代码拆分 splitChunks 默认配置 理解 chunks 理解 maxInitialRequests 理解 maxAsyncRequests 理解 minChunks 理解 cache groups 总结 背景 前端小伙伴都知道,为了降低包大小,经常会把依赖的前端模块独立打包,比如把 vue.vue-router 打到一个单独的包 vendor 中.另外,常会将存在多个路由的复杂页面的每个页面都单独打一个包,只有访问某个页面

  • Vite配置优雅的code spliiting代码分割详解

    目录 Vite如何配置分割代码 1.什么是代码分割/code spliiting 2.Vite 中 rollup code spliiting分割默认方法原理 (1)按照动态导入语句分割打包测试. (2)按照资源导入入口点分割打包测试. (3)manualChunks函数 手动自定义分割.(下面的案例) 3.如何在Vite中配置(vite.config.ts)代码分割/code spliiting (核心关键) Vite代码分割方法1 Vite代码分割方法2 Vite如何配置分割代码 1.什么是

  • webpack学习笔记之代码分割和按需加载的实例详解

    本文介绍了webpack学习笔记之代码分割和按需加载的实例详解,分享给大家,也给自己留个笔记 为什么需要代码分割和按需加载 代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 举个简单的例子: 1.一个HTML中存在一个按钮 2.点击按钮出现一个包着图片的div 3.点击关闭按钮图片消失 Demo目录: 一.当未点击按钮时浏览器只加载了对入口文件打包后的js 二.点击按钮会对组件进行异步加载 这个clichunk就是我们打包好的click组件,包括相应的JS逻

  • react 实现页面代码分割、按需加载的方法

    虽然一直有做 react 相关的优化,按需加载.dll 分离.服务端渲染,但是从来没有从路由代码分割这一块入手过,昨天在本地开发时没有测试成功,今天又搞了下,已经部署到线上环境了,今天就这个记录一下. 修改配置 开发环境:webpack@v3 .react-router@v4 安装依赖: $ yarn add babel-plugin-syntax-dynamic-import -dev 修改 .babelrc 文件:在 plugins 中添加 "syntax-dynamic-import&qu

  • Vue代码整洁之去重方法整理

    在开始本篇的主题之前,让我们把上次遗留下来的问题都清理一下: 将其他组件中 axios 请求的地方封装起来. 这里就不把代码放在开头了,相关代码都放在文末,有兴趣了解的童鞋可以先往下翻. 好了, 我们现在把上篇剩下的任务给完成了,接下来我们来正式开始本篇内容吧. 去重是什么 字面上意思:去除重复,在项目中,不可避免的会出现重复代码.但是如果不好好去处理这些重复代码,那很有可能就会给你很多"惊喜". 如何为"重复" 下一个定义呢? 从最浅显的层次来看, 相同即是重复.

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

随机推荐