如何对vue项目进行优化,加快首页加载速度
上个月上线了一个vue小项目,刚做完项目,打包上线之后,传到服务器上发现首页加载巨慢。
由于开发时间比较紧,我想着怎么快怎么来,因而在开发过程中没考虑过优化性能问题,酿成最后在带宽5M的情况下页面加载巨慢。
用户体验至上,因而必须对象进行优化,我总结一下我都做了哪些优化。
1.路由懒加载,首页加载的时候,不让其他页面加载,减缓首页加载压力。
2.element-ui按需加入。element-ui需要哪部分,就使用哪部分。
3.将组件写的css整合到一个css页面里。
4.图片进行压缩或者上传到CDN上,这样极大的减缓了服务器的加载压力。
5.打包的时候可以不下载Map文件,因为Map文件占内存也很大。
如何对vue项目进行优化,加快首页加载速度的更多相关文章
- vue-cli3项目首页加载速度优化(cdn加速,路由懒加载,gzip压缩)
今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...
- 优化JavaScripe 提升首页加载速度的几种方案解析
优化目的: 1. 减少load量. 2. 优化js,加快页面加载速度. 网站中最影响网站打开速度的是什么?我会告诉是网站中的javascript,简称JS.模板中引用的JS文件越多,打开速度越慢,细读 ...
- Web前段优化,提高加载速度 css
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...
- Web前端性能优化——提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...
- ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...
- vue项目中实现图片懒加载的方法
对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...
- Vue项目中实现图片懒加载
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...
- 几种优化web页面加载速度的策略
剥离静态资源请求到CDN 一般在主域名下的HTTP请求里都会携带大量Cookie信息,最大4KB,每个域名下最多50条:但如果仅仅访问js/css/jpeg等静态资源文件的话是不需要Cookie信息, ...
- Vue项目优化首屏加载速度
Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...
随机推荐
- HTML5 快速学习二 Canvas
本篇文章开始讲解HTML5的核心功能之一:Canvas 通过Canvas可以动态生成和展示图形.图表.图像以及动画. Canvas API功能非常多,我们将讨论最常用的功能. 我们先新建一个canva ...
- 函数和常用模块【day06】:logging模块(八)
本节内容 1.简述 2.简单用法 3.复杂日志输出 4.handler详解 5.控制台和文件日志共同输出 一.简述 很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误 ...
- Codeforces Round #477 (rated, Div. 2, based on VK Cup 2018 Round 3) E 贪心
http://codeforces.com/contest/967/problem/E 题目大意: 给你一个数组a,a的长度为n 定义:b(i) = a(1)^a(2)^......^a(i), 问, ...
- 用matplotlib绘制每次交易的盈亏三角形
用matplotlib绘制每次交易的盈亏三角形 结果: 代码: python def plot_trade_triangle(self): # plot each trade as a trade-t ...
- JavaScript模拟QQ签名(HTML5 contenteditable属性)
例图: 一.思路 1.单击元素时,使元素可以编辑,并获得焦点 2.按下键盘检测用户编辑元素中的文本 3.监听按下Enter键操作或离开可编辑元素焦点时,更新数据库 二.代码 $(function(){ ...
- 一个由SEO优化展开的meta标签大讲解
您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个人网站 ...
- jquery或者js对html控件的处理汇总
1.下拉列表select的处理 a).后台通过jquery获取的json数据对下拉列表select的赋值操作: html页面:<select name="gameserverlist& ...
- Java内存模型-锁的内存语义
一 引言 在说volatile的内存语义时,讲过这样一句话:想要理解透volatile特性有一个很好的方法,就是把对volatile变量的单个读/写,看成是使用同一个锁对这些单个读/写操作做了同步.所 ...
- .Net Core连接RabbitMQ集群
var connectionFactory = new ConnectionFactory() { //HostName = "192.168.205.128", 集群不在此处声明 ...
- javascript 模拟按键点击提交
上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...