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操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
JavaScript事件委托实例分析
May 26 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
数字转英文
2006/12/06 PHP
实用函数7
2007/11/08 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
在js中使用"with"语句中跨frame的变量引用问题
2007/03/08 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
JavaScript中0和""比较引发的问题
2016/05/26 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python获得图片base64编码示例
2014/01/16 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
django框架两个使用模板实例
2019/12/11 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
解决python运行效率不高的问题
2020/07/20 Python
is_file和file_exists效率比较
2021/03/14 PHP
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
一年级语文教学反思
2014/02/13 职场文书
《风筝》教学反思
2014/04/10 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
2015年纪委工作总结
2015/05/13 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers