浅谈vue首屏加载优化


Posted in Javascript onJune 28, 2018

本文介绍了浅谈vue首屏加载优化,分享给大家,具体如下:

库使用情况

  1. vue
  2. vue-router
  3. axios
  4. muse-ui
  5. material-icons
  6. vue-baidu-map

未优化前

首先我们在正常情况下build

浅谈vue首屏加载优化

优化

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首屏加载优化

在当前项目引用了16个muse-ui组件的情况下 css减少了80kb,js减少了快200kb.

2. 基于DllPlugin 和 DllReferencePlugin 的 webpack 构建优化

这一步并没有对项目产出的文件进行什么优化.而是优化了构建速度.

DllPlugin 预编译模块.有点像android开发中的lib Module,或者iOS的framework.

我们可以对项目中用到的vue,vue-router,axios,muse-ui 这些固定的,基本不变动的模块进行预编译. 具体操作不在赘述,可以看一下这篇文章,也是我写的,但是觉得自己没讲利索? .

看一下构建时间的结果对比:

浅谈vue首屏加载优化

before:38291ms
after :10089ms

项目中多了core.dll.css和core.dll.js 他们就是划分出来的固定的,基本不变的模块,所以只需要编译一次,以后引用就好.有点library的感觉.这样每次构建省去了构建固定模块的时间. 时间有38s降到了10s,如果你构建比较频繁,应该还是很有用的.

3. 异步组件 官方文档

官方文档是这么介绍的:

在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。

修改router

before:

import search from './search.vue'
{
      path: '/search',
      name: 'search',
      component: search
}

after:

const search = resolve => require(['./search.vue'], resolve);
{
      path: '/search',
      name: 'search',
      component: search
}

具体我们来看看改造后的效果:

浅谈vue首屏加载优化

因为我的项目目前只有7个页面,即使把页面都做成异步加载,效果并不是很'喜人',整体缩小了30kb.

4. 优化组件加载时机

再使用别人的组件时,上手教程都会提示让你在main.js里注册一下就好.当然这是最省事的办法.

但是根据项目情况,比如我的项目用到了vue-baidu-map.

如果你按照默认的加载方式,vue-baidu-map是会被打在vendor.js .但其实这个组件我只有某个二级页面才使用.所以让我们来调整一下加载位置看看.把注册的vue-baidu-map放在真正使用它的地方.

浅谈vue首屏加载优化

这样,verdor.js 又小了56kb.因为首页根本用不到vue-baidu-map. 当然这样会带来一个问题:当多个页面使用vue-baidu-map,会出现多个页面重复打包.

浅谈vue首屏加载优化

怎么异步加载插件,这个我还没搞明白...

5. webpack-bundle-analyzer

webpack-bundle-analyzer是用来分析 Webpack 生成的包体组成并且以可视化的方式反馈给开发者的工具.你可以通过命令:

npm run build --report

来查看依赖关系.然后再根据具体情况划分代码块.效果图就是上面那张花里胡哨的图...它清楚的告诉你了打包时模块划分的情况.

6. 前后对比:

浅谈vue首屏加载优化

浅谈vue首屏加载优化

638.7kb vs 286.2kb

这还是在未开启gzip的情况下.

新增一张开启gzip的截图,84.8kb,相对最后的优化结果286.2kb是70%的压缩比...哈哈

浅谈vue首屏加载优化

总结

  • 在使用ui库时,尽量使用按需加载方式.
  • 异步加载,官方文档很详尽,改造起来也不难,可以试试
  • 合理规划三方库的引用.这个听起来有点龟毛,'收益'可能也不是很高,不过是个调整方向
  • 善用webpack-bundle-analyzer优化项目依赖
  • 服务端开启 gzip压缩,谁用谁知道!

如果你能看到这,十分感谢你赏脸听一个android开发bb前端开发? .

参考

vue官方文档-异步组件

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

Javascript 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
Vue SPA单页应用首屏优化实践
Jun 28 #Javascript
Webpack的dll功能使用
Jun 28 #Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 #Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 #Javascript
详解ES6中的三种异步解决方案
Jun 28 #Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 #Javascript
You might like
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
js常用DOM方法详解
2017/02/04 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
Python读取Excel的方法实例分析
2015/07/11 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
解决Mac下使用python的坑
2019/08/13 Python
opencv python图像梯度实例详解
2020/02/04 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
总账会计岗位职责
2014/03/13 职场文书
销售内勤岗位职责
2014/04/15 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
小学体育教学随笔
2015/08/14 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL