美文网首页
前端单页面应用缓存策略

前端单页面应用缓存策略

作者: 木兮君 | 来源:发表于2020-05-13 11:52 被阅读0次

在当前常用的单页面页面开发中。会将生产包发布为:固定名称的html文件和带hash的js、css文件

所以我们需要保证html必须每次都实时请求服务器,但是js和css文件可以强缓存在本地,减少请求加速显示。

nginx配置如下:

  • /、/*.htm、/*.html文件配置协商缓存
  • **/*.js、/*.css文件配置强缓存 **
    location / {
        root   html;
        index  index.html index.htm;

        if ( $request_uri ~* /((.*)\.html?)?$ ) {
            add_header Cache-Control no-cache;
        }
        if ( $request_uri ~* /.*\.(js|css)$ ) {
            add_header Cache-Control max-age=86400;
        }
    }

相关文章

  • 前端单页面应用缓存策略

    在当前常用的单页面页面开发中。会将生产包发布为:固定名称的html文件和带hash的js、css文件。 所以我们需...

  • react入门

    前端开发扫盲(写给同事) chapter1 概念入门 前端几个重要的概念 ? 单页面应用: 单页面应用与传统jav...

  • Vue、React前端项目打包部署

    前端单页面应用部署 前端打包上线部署方案之 hash路由模式 对于hash路由模式打包的单页面应用,直接发布到服务...

  • qiankun 源码解析

    微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。将单页面前端...

  • 2019-02-17

    关于前端单页面应用 1.前端单页面应用就是在一个主要的界面上和用户进行交互,在交互的过程中不需要重载一整个新的页面...

  • 【前端】【单页面、多页面应用】

    简介:单页面应用、多页面应用各自优点和应用场景:learn-anything | 2019年01月08日10:...

  • 2021-07-21 vue-cli3打包后清除浏览器缓存

    该篇的做法已不推荐,仅供参考:请移步至更详细的文章【http常用缓存策略及vue-cli单页面应用、服务器端(ng...

  • 二叉树的遍历

    一、为什么前端需要学习数据结构与算法? 以前的前端页面都是多页面,现在前端的趋势是单页面应用,需要将复杂的逻辑都放...

  • SPA及其优缺点

    SPA:单页面web应用,一般整个应用只有一个html页面,通过前端路由实现无刷新跳转。 Vue就是SPA应用的典...

  • SPA及其优缺点

    SPA:单页面web应用,一般整个应用只有一个html页面,通过前端路由实现无刷新跳转。 Vue就是SPA应用的典...

网友评论

      本文标题:前端单页面应用缓存策略

      本文链接:https://www.haomeiwen.com/subject/ubqnnhtx.html