1、 按需引入UI组件

当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例:

(1)     新建一个elementUI.js文件

(2)     访问地址找到按需引入方式的说明

(3)     复制里面的内容到新建的JS文件中,并注释掉不用的组件

(4)     在主文件JS(一般为main.js)中引用elementUI.js文件

2、 异步引入路由组件

路由组件的优化主要是文件引入方式的变化,对于引入后的组件使用是一致的。

  Before:
  import index from '@/components/index'
  {
    path: '/ index,
    name: ‘index’,
    component: index
  }

方案一:

  After:
    const index = resolve => require(['@/components/index'], resolve)
    const index = resolve => require.ensure([], () => resolve(require('@/components/index')))

两段代码都是将组件分别打包成单个JS文件,在网站加载时会自动解析加载需要的JS文件

方案二(推荐方案):

const index = resolve => require.ensure([], () => resolve(require('@/components/index')), 'indexChunk')

这段代码将组件分类到名为indexChunk的chunk中,在网站加载时会自动解析需要加载哪个 chunk。虽然分别打包的总体积会变大(同chunk将打包成同一个JS文件),但 是减少了资源请求,从而提升了速度。

3、 请求组件优化:

若使用了Ajax相关的库,比如vue-resource/axios的话,并且只用到了get、post等基础方式传输,可将其移除项目自己重新封装ajax请求对象或在兼容fetch浏览器中使用fetch请求

4、 SSR(Server Side Render/服务端渲染)

后续使用再总结

关于VUE首屏加载过长的优化,VUE项目开发优化的更多相关文章

  1. vue首屏加载优化

    库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行 ...

  2. Vue优化首屏加载

    背景: 使用vue + iview搭建的一个后台管理系统,路由已经用了懒加载,加载登陆页面,居然还是需要18S左右,刚到一个新公司,项目经理很委婉的说,看看能不能优化了一下.然后就开始了网上一大堆'v ...

  3. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  4. Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...

  5. Vue项目优化首屏加载速度

    Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...

  6. vuejs学习之 项目打包之后的首屏加载优化

    vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例 ...

  7. SPA 首屏加载性能优化之 vue-cli3 拆包配置

    前言 现在已经是vue-cli3.x    webpack4.x 的时代了,但是网上很多拆包配置还是一些比较低版本的. 本文主要是分享自己的拆包踩坑经验. 主要是用了webpack4 的 splitC ...

  8. react 首屏加载优化

    react 首屏加载优化,原本是在入口HTML文件中加载loading动画,但是部署在测试环境上的时候一直无法显示loading的部分,也是奇怪了,我们测试环境的部署一直跟本地的都不太一样,内外网的转 ...

  9. Vue项目使用CDN优化首屏加载

    前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打 ...

随机推荐

  1. PHP引用(&)练习

    <?php class talker { private $data = 'Hi'; public function & get(){ //返回值指向一个内容,这里是指向$data的内容 ...

  2. linux和windows共享目录

    常用的samba共享 1.安装samba:可以先检查下是否已经安装:rpm -qa | grep samba,没安装直接yum,安装命令:yum install samba 2.创建共享文件夹 mkd ...

  3. -实现 LFU 缓存算法

    -实现 LFU 缓存算法, 设计一个类 LFUCache,实现下面三个函数 + 构造函数: 传入 Cache 内最多能存储的 key 的数量 + get(key):如果 Cache 中存在该 key, ...

  4. Codeforces Round #424 (Div. 1, rated, based on VK Cup Finals)

    A 题意:给你人的坐标,钥匙的坐标,办公室的坐标.要求所有人能够拿到钥匙并且走到办公室的最短时间.一个位置只能有一个人,一个位置只有一把钥匙,人和钥匙可以在同一个位置. 思路:DP+贪心,dp[i]表 ...

  5. Node.js的安装以及npm的基础使用

    索引: Node.js的安装以及Node.js的模块管理Node.js开发环境搭建以及对ES6的支持Node.js构建Vue.js项目Vue.js单文件组件的开发基于Vue.js的UI组件(Eleme ...

  6. AJAX从入门到放弃(二)

    XHR 响应 由 driventokill 创建,路飞 最后一次修改 2015-09-25 AJAX - 服务器 响应 由于 HTTP 响应是由服务端发出的,并且服务器做出响应需要时间(比如网速慢等原 ...

  7. 第63节:Java中的Spring MVC简介笔记

    前言 感谢! 承蒙关照~ Java中的Spring MVC简介笔记 MVC简介 Spring MVC 基本概念 Spring MVC 项目搭建 maven 使用Spring MVC进行开发 实现数据绑 ...

  8. 写给深圳首期Python自动化开发周未班的信

    你是否做了正确的决定? 深圳首期周未班的同学们大家好,我是Alex, 老男孩教育的联合创始人,Python项目的发起人,51CTO学院连续2届最受学员喜爱的讲师,中国最早一批使用Python的程序员, ...

  9. Spring Boot 2.x 启动全过程源码分析(上)入口类剖析

    Spring Boot 的应用教程我们已经分享过很多了,今天来通过源码来分析下它的启动过程,探究下 Spring Boot 为什么这么简便的奥秘. 本篇基于 Spring Boot 2.0.3 版本进 ...

  10. DedeCMS上传视频

    DedeCMS建站方便快捷,但是在上传视频时会出现问题,主要是文件格式与大小限制,需要修改配置文件,修改的地方主要有: 1.修改 DedeCMS系统配置参数--附件设置--允许的多媒体软件类型(以MP ...