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 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
Javascript学习笔记4 Eval函数
Jan 11 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 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版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Django如何配置mysql数据库
2018/05/04 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
学校安全工作制度
2014/01/19 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
企业承诺书格式范文
2015/04/28 职场文书
经费申请报告范文
2015/05/18 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers