Vue性能优化

1、gzip压缩

在所有的web前端项目,静态资源基本都放在cdn上,gzip的压缩是非常必要的,它直接改变了js文件的大小,减少两到三倍。nginx的gzip配置非常简单,在你对应的域名底下,添加下面的配置,重启服务即可。gzip_comp_level的值大于2的时候并不明显,建议设置在1或者2之间。

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

2、 服务器缓存(效果明显)

为了提高服务器获取数据的速度,nginx缓存着静态资源是非常必要的。如果是测试服务器对html应该不设置缓存,而js等静态资源环境因为文件尾部会加上一个hash值,这可以有效实现缓存的控制。

nginx  config.js中加入

location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { 
  access_log   off; 
  expires      30d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
  access_log   off;
  expires      24h;
}
location ~* ^.+\.(html|htm)$ {
  expires      1h;
}

3、浏览器缓存

浏览器缓存是通过html的头文件中的meta来控制。http-equiv是一个专门针对http的头文件,可以向浏览器传回一些有用的信息。与之对应的content,是各个参数的变量值。

4、Promise请求

es6的其中一个特性就是原生支持promise。在这里,我先不说异步编程里的generator和aync/await的属性。它们功能的实现都是基于promise。 Promise的特点在于: 1、减少回调函数 2、串并行处理 3、代码的优雅

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue加载优化(全)

    程序员不务正业
  • python3.5 import matplotlib.pyplot错误问题

    程序员不务正业
  • 小程序bindtap参数传递

    程序员不务正业
  • 008.Nginx静态资源

    Nginx作为静态资源Web服务器部署配置, 传输非常高效, 常常用于静态资源处理,请求以及动静分离。通常非服务器动态运行生成的文件属于静态资源。

    木二
  • 「简明性能优化」双端开启Gzip指南

    在 http/1.0 协议中关于服务端发送的数据可以配置一个 Content-Encoding 字段,这个字段用于说明数据的压缩方法

    前端劝退师
  • 优化 Laravel 网站打开速度

    1.关闭debug 打开.env文件,把debug设置为false. APP_ENV=local APP_DEBUG=false APP_KEY=base64...

    琯琯
  • python3使用gzip压缩与解压缩

    本文由腾讯云+社区自动同步,原文地址 https://stackoverflow.club/article/python-gzip/

    羽翰尘
  • Nginx学习之开启Gzip压缩提升页面加载速度

    前几天有个买链接的,顺手查了下站的权重,果然又回到1了,尽管不是太在意这个东西,但是总归越高越好了。 然而重点是在爱站的最下面居然发现了居然没有开启Gizp,...

    小柒2012
  • nginx配置静态资源gzip压缩

    用户1437675
  • Nginx Gzip 压缩

    不知不觉 nginx主题的文章写了60+篇,有最早的也有最近的,有些是记录安装配置,有些是记录问题解决方法,内容质量有深也有浅参差不齐,随着技术迭代有些文章已经...

    用户1560186

扫码关注云+社区

领取腾讯云代金券