浅谈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使用手册之三 CSS操作
Mar 24 Javascript
JS获取父节点方法
Aug 20 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 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
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
php中的一个中文字符串截取函数
2007/02/14 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
jquery的ajax简单结构示例代码
2014/02/17 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
python解决字典中的值是列表问题的方法
2013/03/04 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
python实现的生成word文档功能示例
2019/08/23 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
餐厅总厨求职信
2014/03/04 职场文书
活动总结怎么写
2014/04/28 职场文书
个人主要事迹材料
2014/08/26 职场文书
报到证办理个人委托书
2014/10/06 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
大学生求职信怎么写
2015/03/19 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
作文之亲情600字
2019/09/23 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers