0
点赞
收藏
分享

微信扫一扫

vue前端项目优化方式

陌岛 2022-04-07 阅读 62
前端

压缩js和css之类的。显然这些都是必须做的,而且已经根本不是主要的性能优化的关键点。

一、 gzip压缩

# 开启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]\.";

二 服务器缓存

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;
}

三 浏览器缓存

HTTP 1.0

在HTTP1.0中通过Pragma控制页面缓存,可以设置为Pragma或no-cache。在不让浏览器或中间缓存服务器缓存页面的情况下,通常设置的值为no-cache,不过这个值不这么保险,通常还加上Expires置为0来达到目的。Expires可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输获取新的页面信息。PS:内容必须使用GMT的时间格式。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

HTTP 1.1

在HTTP1.1中通过Cache-Control控制页面缓存,可以设置为no-cache、private、no-store、max-age或must-revalidate等,默认为private。

<meta http-equiv="Cache-Control" content="no-cache">
public 浏览器和缓存服务器都可以缓存页面信息
private 对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效
no-cache 浏览器和缓存服务器都不应该缓存页面信息
no-store 请求和响应的信息都不应该被存储在对方的磁盘系统中,不使用缓存
must-revalidate 对于客户机的每次请求,代理服务器必须想服务器验证缓存是否过时
max-age 客户机可以接收生存期不大于指定时间(以秒为单位)的响应
min-fresh 客户机可以接收响应时间小于当前时间加上指定时间的响应

Last-Modified和Etags

四 代码分包

两种分包的方法:

external 把包排除,使用cdn资源
dll 打包

DLL打包

五 预加载

<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://completion.amazon.com'>
<link rel='dns-prefetch' href='http://fls-na.amazon.com'>

六 vue层面

骨架屏
组件缓存
使用keep-alive提高页面加载效率,把组件缓存到浏览器内核,方便快速切换页面
http缓存

路由懒加载
减少首屏加载时间,切换到对应模块再进行加载

字体图标替换图片
好处不失真,在服务器上减少图片的请求,方便修改

样式和方法复用
销毁定时器和控件
减少对应的get,set,在vue发布通知时候减少工作量,在离开路由进行销毁,解绑事件,通过vm.$off()
释放iframe的内存

举报

相关推荐

0 条评论