上个月上线了一个vue小项目,刚做完项目,打包上线之后,传到服务器上发现首页加载巨慢。

由于开发时间比较紧,我想着怎么快怎么来,因而在开发过程中没考虑过优化性能问题,酿成最后在带宽5M的情况下页面加载巨慢。

用户体验至上,因而必须对象进行优化,我总结一下我都做了哪些优化。

1.路由懒加载,首页加载的时候,不让其他页面加载,减缓首页加载压力。

2.element-ui按需加入。element-ui需要哪部分,就使用哪部分。

3.将组件写的css整合到一个css页面里。

4.图片进行压缩或者上传到CDN上,这样极大的减缓了服务器的加载压力。

5.打包的时候可以不下载Map文件,因为Map文件占内存也很大。

如何对vue项目进行优化,加快首页加载速度的更多相关文章

  1. vue-cli3项目首页加载速度优化(cdn加速,路由懒加载,gzip压缩)

    今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...

  2. 优化JavaScripe 提升首页加载速度的几种方案解析

    优化目的: 1. 减少load量. 2. 优化js,加快页面加载速度. 网站中最影响网站打开速度的是什么?我会告诉是网站中的javascript,简称JS.模板中引用的JS文件越多,打开速度越慢,细读 ...

  3. Web前段优化,提高加载速度 css

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  4. Web前端性能优化——提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  5. ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler

    ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...

  6. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  7. Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...

  8. 几种优化web页面加载速度的策略

    剥离静态资源请求到CDN 一般在主域名下的HTTP请求里都会携带大量Cookie信息,最大4KB,每个域名下最多50条:但如果仅仅访问js/css/jpeg等静态资源文件的话是不需要Cookie信息, ...

  9. Vue项目优化首屏加载速度

    Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...

随机推荐

  1. python(27) 抓取淘宝买家秀

    selenium 是Web应用测试工具,可以利用selenium和python,以及chromedriver等工具实现一些动态加密网站的抓取.本文利用这些工具抓取淘宝内衣评价买家秀图片. 准备工作 下 ...

  2. 使用pandas导入csv文件到MySQL

    之前尝试过用命令行来解决csv文件导入到MySQL这个问题,没想到一直没有成功.之后会继续更新的吧,现在先用pandas来解决这个问题,虽然会复杂一点,但至少能用. 例子是导入movielens的ra ...

  3. 一个java版本的简单邮箱小爬虫

    //趁着有空回头复习了一把正则表达式/* 以下代码以百度某个贴吧的 URL 作为源,实现了读取 EmailAddress 并写入文件保存起来的两个功能,如果要爬取其它信息,可以改写正则实现相应功能 要 ...

  4. 一致性哈希算法介绍,及java实现

    应用场景 在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括: 轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法(Res ...

  5. 20155225 2016-2017-2 《Java程序设计》第八周学习总结

    20155225 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 通用API 日志API 国际化基础 规则表达式 JDK8增强功能 教材学习中的问题和解决过程 ...

  6. unbind()清除指定元素绑定效果

    定义和用法 unbind() 方法移除被选元素的事件处理程序. 该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行. ubind() 适用于任何通过 jQuery 附加的事件 ...

  7. 交互题(二分)(D. Game with modulo)

    题目链接:http://codeforces.com/contest/1104/problem/D 题目大意:给出一个式子 x%a y%a,会返回结果,如果返回x代表x%a>=y%a.如果返回y ...

  8. echo变量失败,提示:ECHO 处于关闭状态

    检查变量值,变量值为空就会提示关闭

  9. linux常用运维命令【转】

    自己的小网站跑在阿里云的ECS上面,偶尔也去分析分析自己网站服务器日志,看看网站的访问量.看看有没有黑阔搞破坏!于是收集,整理一些服务器日志分析命令,大家可以试试! 1.查看有多少个IP访问: awk ...

  10. python的map/reduce区别

    直接上列子 map: 把f(x)作用在list的每一个元素并把结果生成一个新的list” # coding=utf-8def f(x): return x * x r = map(f, [1, 2, ...