Web前端:单页应用部署时缓存策略

程序那点儿事 2019-01-11 09:28:57 ⋅ 89 阅读

问题描述

前端网站采用Vue + Nginx的方式进行生产环境部署。

系统在发布更新次日,收到客户的投诉,发现登录系统之后,出现页面空白问题,刷新几次后显示正常。查看日志发现:

2019/01/07 10:26:01 [error] 19#0: *833 open() "/.../static/js/0.4a66cb25e7f24262c3f6.js" failed (2: No such file or directory), client: XX.XX.XX.XX, server: localhost, request: "GET /static/js/0.4a66cb25e7f24262c3f6.js HTTP/1.1"

问题分析

由于vue在build之后,会重新生成index.html + static资源。从日志判断,【/static/js/0.4a66cb25e7f24262c3f6.js】是上一版本的静态资源。而index.html中get请求获取,跟浏览器缓存有关

但是查看nginx配置,发现没有配置缓存策略。

    server {        
       listen       80 default_server;        
       server_name  localhost;        
       root         /www/;        
       index        index.html index.htm;        
       location / {            
           try_files $uri $uri/  index.html;        }    }

当http头中无缓存配置,那么将使用浏览器默认缓存策略,如下:

先放上结论吧,Chrome和Firefox对js、css之类的文件,在内存中的缓存时长,是: (访问时间 - 该文件的最后修改时间) ÷ 10

  • 假设文件 a.js 最后编辑时间是 2018年12月1号 10点0分0秒;

  • Chrome的第一次访问时间是 2018年12月1号 12点0分0秒;

  • 第一次访问与文件编辑时间相差2小时,即7200秒,那么缓存时长就是720秒

解决方案

http请求头中,通过cache-control声明缓存策略。

  • 对于index.html采用no-cache策略,客户端使用缓存,但是使用前需要与服务器确认版本状态。

  • 对于static资源,采用客户端缓存。

nginx配置参考:

  location /index.html {    
     add_header "Cache-Control" "no-cache";  }  
 location /static/ {    
     access_log none;    
     expires 14d;  }  
 location / {    
     proxy_set_header Host $host;    
     proxy_set_header X-Real-IP $remote_addr;    
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;            proxy_pass http://127.0.0.1:8081;    
     client_max_body_size  500m;  }  
 location = / {  }



---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦




全部评论: 0

    我有话说:

    架构实战篇(十四):Spring Boot 多缓存实战

    多场景下的不同缓存策略解决方案

    推荐一款前端数据源管理工具 algeb

    方案不是很灵活,无法解决共享数据源,数据没回来怎...

    大数据量下 MyBatis PageHelper 分查询性能问题的解决办法

    前因 项目一直使用的是PageHelper实现分功能,项目前期数据量较少一直没有什么问题。随着业务扩增,数据库扩增PageHelper出现了明显的性能问题。 几十万甚至上百万的表数据查询性能缓慢

    Dapr 1.0 发布,分布式应用运行

    Dapr 1.0 正式发布。 Dapr 是一个开源、可移植的、事件驱动的运行,可以帮助开发人员构建在云和边缘上运行的弹性的、微服务的、无状态和有状态应用程序,并且关注于业务逻辑而不用考虑分布式相关

    「轻阅读」如何构建可伸缩的Web应用

    可伸缩性已经成为Web应用程序的DNA!

    缓存的架构设计要点

    缓存的典型应用场景和设计要点

    点登录原理与简单实现

    一、系统登录机制 1、http无状态协议   web应用采用browser/server架构,http作为通信协议。http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或之后的请求

    微信小程序微商城(八):缓存实现商品购物车功能

    商品详情将商品信息放入缓存,购物车页面读取缓存获取商品信息,购物车商品计算和删除缓存商品

    NGINX Unit 1.22 发布,动态 Web 应用服务器

    NGINX Unit 是一个多语言应用服务器、反向代理和静态文件服务器,可用于类 Unix 系统。它是由 nginx 团队成员从头开始构建的,并且在运行具有很高的效率且可全方位配置。 Unit

    Nginx Unit 1.21.0 发布,动态 Web 应用服务器

    Nginx Unit 1.21.0 已发布,更新内容除了常规的 bugfix 外,还增加了部分新特性,例如支持条件匹配的 PCRE 和多线程请求处理等。 因此,开发者现在可以调整每个应用程序进程中

    精品推荐:基于Vue2.0高仿微信App的应用 学习Vue新动力!

    利用Vue2.0模仿微信app,基本做到了以假乱真的效果

    MoguBlog v6.0 已经发布,前后端分离博客系统

    MoguBlog v6.0 已经发布,这是一个前后端分离博客系统。 此版本更新内容包括: fix: 解决博客详情重复点赞,弹出登录框的情况 docs: nacos数据库中增加prod配置

    微软改进 Chromium 标签恢复功能

      微软正在为 Chromium 改进标签恢复功能,以提升 Edge 和 Chrome 的可靠性。 当 Chrome/Edge 遭遇意外关闭或崩溃,再次启动后会提供恢复标签及其会

    精品推荐:缓存架构之实战演练Elastic Job定时实现redis缓存预热、缓存更新

    缓存预热就是系统上线后,将相关的缓存数据直接加载到缓存系统。这样就可以避免在用户请求的时候,先查询数据库,然后再将数据缓存的问题!用户直接查询事先被预热的缓存数据!

    前端实战篇-聊聊JavaScript内存

    内存生命周期、分配内存、使用分配的内存(读与写操作),当应用程序不再需要,释放掉已分配的内存

    高性能缓存架构设计(超实用)

    缓存虽然能够大大减轻存储系统的压力,但同时也给架构引入了更多复杂性。

    微信小程序抖音实战-首(下)

    抖音小程序首动态数据获取

    DrissionPage WEB 自动化测试集成工具

    软件简介 DrissionPage,即 driver 和 session 的合体,是一个基于 python 的 Web 自动化操作集成工具。 requests 爬虫面对要登录的网站,要