vue项目首屏打开速度慢的解决方法


Posted in Javascript onMarch 31, 2019

最近接手了一个后台管理系统,技术栈主要是vue全家桶+elementui,老大打开测试环境页面的时候,说看到首页需要6秒钟,那如何进行优化呢?

首先我们需要安装webpack-bundle-analyzer

// webpack.prod.conf.js
if (config.build.bundleAnalyzerReport) {
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
// config/index.js
build: {
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
}

运行npm run build --report

vue项目首屏打开速度慢的解决方法

我们可以看到,vendor中的elementui占了500k,怎么优化呢?

在webpack配置文件中增加,接下来就是见证奇迹的时刻。

externals: {
  'vue': 'Vue',
  'element-ui': 'ELEMENT',
  'axios': 'axios'
 },

再看一下我们的vendor体积

vue项目首屏打开速度慢的解决方法

vendor一共才195k

那缺少的elementui文件去哪里找呢?答案是cdn引用。

vue项目首屏打开速度慢的解决方法

之前项目里还有引用moment,但是这个库实在是太大了,在github上我找到一个跟momentapi完全一样的库,但是文件大小只要2kb。

vue项目首屏打开速度慢的解决方法

其他优化方法还有ssr,这个最好用nuxtjs来做,自己配置ssr实在太麻烦了。

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

Javascript 相关文章推荐
jQuery中获取Radio元素值的方法
Jul 02 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
node+express制作爬虫教程
Nov 11 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
VUE安装使用教程详解
Jun 03 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 #jQuery
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 #Javascript
使用post方法实现json往返传输数据的方法
Mar 30 #Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 #Javascript
微信公众平台获取access_token的方法步骤
Mar 29 #Javascript
vue路由--网站导航功能详解
Mar 29 #Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 #Javascript
You might like
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
php递归函数怎么用才有效
2018/02/24 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
js中的 || 与 && 运算符详解
2018/05/24 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
Flask配置Cors跨域的实现
2019/07/12 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
python3实现简单飞机大战
2020/11/29 Python
python解包概念及实例
2021/02/17 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
AOP的定义以及作用
2013/09/08 面试题
计算机工程学院个人求职信
2013/10/05 职场文书
超市重阳节活动方案
2014/02/10 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
解除劳动合同协议书
2014/09/17 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
实习证明格式范文
2015/06/16 职场文书
七年级语文教学反思
2016/03/03 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python