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 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
js动态引入的四种方法
May 05 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
Nuxt.js实战和配置详解
Aug 05 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 sprintf()函数用例解析
2011/05/18 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
js跳转页面方法总结
2014/01/29 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
python爬虫如何解决图片验证码
2021/02/14 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
村干部承诺书
2014/03/28 职场文书
新年爱情寄语
2014/04/08 职场文书
艾滋病宣传标语
2014/06/25 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python