浅谈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的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
前端把html表格生成为excel表格的实例
Sep 19 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
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
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Python json读写方式和字典相互转化
2020/04/18 Python
8种常用的Python工具
2020/08/05 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
大整数数相乘的问题
2012/07/22 面试题
支教自我鉴定
2014/01/18 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
市场部经理岗位职责
2014/04/10 职场文书
计划生育目标责任书
2015/05/09 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers