库使用情况

  • vue

  • vue-router

  • axios

  • muse-ui

  • material-icons

  • vue-baidu-map

未优化前

首先我们在正常情况下build

优化

1. 按需加载

当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码.

修改前:

import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
import 'muse-ui/dist/theme-light.css'
Vue.use(MuseUI)

修改后:

import appBar from 'muse-ui/src/appBar'
import toast from 'muse-ui/src/toast'
import drawer from 'muse-ui/src/drawer'
import popup from 'muse-ui/src/popup' Vue.component(appBar.name, appBar);
Vue.component(toast.name, toast);
Vue.component(drawer.name, drawer);
Vue.component(popup.name, popup);

这里有点麻烦的就是你要把整个项目用到的muse-ui组件都注册一遍,当然你也可以只在用到的页面做局部引用.让我们来看看使用按需加载后的效果

vue首屏加载优化的更多相关文章

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

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

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

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

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

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

  4. react 首屏加载优化

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

  5. 关于VUE首屏加载过长的优化,VUE项目开发优化

    1. 按需引入UI组件 当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例: (1)     新建一个elementUI.js文件 (2)     访问地址找到按需引入方式的说 ...

  6. Vue优化首屏加载

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

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

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

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

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

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

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

随机推荐

  1. Hadoop技巧(03):HostName命名带来的问题

    阅读目录 序 HostName 问题 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink ...

  2. mac 终端常用命令

    1.复制文件内容到剪贴板:pbcopy < ~/.ssh/id_rsa.pub. 2.ssh key 的生成,参考mac ssh key 的获取. 3.sourcetree 需要输入的密码,指的 ...

  3. iOS 10 UserNotifications 使用说明

    本教程以贴代码为主.尽可能直观,少量说明. 注意:XCode8的需要手动开启主target Capabilities中的Push Notification. 关于创建多个target后真机测试的证书问 ...

  4. iis7设置404页面不生效的原因

    打开web.config <httpErrors errorMode="Custom" existingResponse="PassThrough"> ...

  5. 笔记:利用 Cocos2dx 3.2 与 Box2D制作一个跑酷游戏(上)

    最近写lua写得没有力气了,所以想让脑袋放松一下,刚好看到有人在用swift做游戏: Swift游戏实战-跑酷熊猫 于是脑子一短路,就想到了利用这些素材来做一个游戏. 本来不想记笔记的,但是由于选择物 ...

  6. 使用C#.NET列举组合数前N项和

    列举如下列所示的组合数前N项和,代码如下(递归方法里注意去重): static void Main(string[] args) { List<).ToList(); File.AppendAl ...

  7. 【WPF】ImageMagick调节图片的颜色

    需求:打开一张图片后,自由调节图片的颜色(色调). 思路:读取显示一张图片后,用ColorPicker取色器选择一种颜色,之后将图片的色调调节为该颜色. 工具: 1.图像工具 ImageMagick( ...

  8. 每天一个linux命令(3):ls命令

    1.命令简介 ls(list 列出目录内容)命令用来列出显示指定目录里的文件及文件夹清单,缺省下ls用来打印出当前目录的清单.通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文件权限 ...

  9. 洛谷P1415 拆分数列(dp)

    题目链接:传送门 题目: 题目背景 [为了响应党中央勤节俭.反铺张的精神,题目背景描述故事部分略去^-^] 题目描述 给出一列数字,需要你添加任意多个逗号将其拆成若干个严格递增的数.如果有多组解,则输 ...

  10. 结对编程--fault,error,failure

    结对编程对象:叶小娟 对方博客地址:http://www.cnblogs.com/yxj63/ 双方贡献比例:1:1 结对照片: 结对题目:输入一定个数的数字,对其排序后输出最大值.   1 pack ...