如何对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项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...
随机推荐
- MySQL的DML常用语法格式
MySQL的DML常用语法格式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们知道MySQL的查询大致分为单表查询,多表查询以及联合查询.多表查询,顾名思义,就是查询的结果可能 ...
- [Java] I/O底层原理之二:网络IO及网络编程
首先我们来看一下当访问一个域名时它的过程 查找 DNS 首先,浏览器检查缓存中有没有 浏览器缓存中没有,则查找操作系统中有没有配置这个对应关系 如果操作系统中也没有,则去 DNS 查找,即发送DNS报 ...
- 单字节编码&双字节编码
单字节编码(WINDOWS-1252.ISO-8859-1.UTF-8) 双字节编码(UTF-16) Windows 记事本默认会将文件保存为单字节的 ANSI(ASCII).如果您选择 " ...
- Spring RedisTemplate操作-ZSet操作(6)
@Autowired @Resource(name="redisTemplate") private RedisTemplate<String, String> rt; ...
- HDU 1176 免费馅饼 DP类似数塔题
解题报告: 小明走在一条小路上,这条小路的长度是10米,从左到右依次是0到10一共十个点,现在天上会掉馅饼,给出馅饼掉落的坐标和时间,一开始小明的位置是在坐标为5的位置, 他每秒钟只能移动一米的距离, ...
- FinalShell 推荐
FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发,运维需求. 用户QQ群 342045988 Windows版下载地址:http:/ ...
- git与代码托管工具
1.git初识 git是一个版本管理工具,用来管理项目的不同的版本,记录下不同的提交记录,git还可以构建不同的分支,用来给不同的人来推送使用. 推荐的git教程:https://www.cnblog ...
- 【转】SpringMVC Controller 介绍
转自:原文url 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ...
- ARM linux内核启动时几个关键地址【转】
转自:http://www.cnblogs.com/armlinux/archive/2011/11/06/2396787.html 1. 内核启动地址1.1. 名词解释ZTEXTAD ...
- C# 压缩文件 的创建
using System;using System.IO.Compression; using System.Collections.Generic;using System.Linq;using S ...