如何缓存 SPA 的 html 模板答案

【问题标题】：How to cache html templates for SPA如何缓存 SPA 的 html 模板
【发布时间】：2018-07-07 16:04:53
【问题描述】：

我正在制作单页应用程序，我需要 prove a concept 以便我可以将 html 模板缓存到浏览器缓存中并在以后重用它。

我已经动态生成了来自 php 的 html，它看起来像这样：

<!DOCTYPE html>
<html >
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
        <script>
            $(function() {
                $('#content').load('https://mysite.net.au/index.php?endpoint=get-html-template&template=FirstTemplate&version=1');               
            });
            </script>
    </head>
    <body id="content"></body>
</html>

我想处理这个文件中的 url，使其加载特定的模板，利用浏览器缓存。

如果我需要更新页面模板，我会将版本更改为 2 或 3，然后它会重新加载模板。我实际上需要永久缓存 html 文件。

这是理论上的。

在实践中，在谷歌浏览器的开发者工具的网络页面上我看到了

jquery-3.3.1.min.js SIZE (from memory cache)  

index.php?endpoint=get-html-template&template=FirstTemplate&version=1  SIZE 2.2KB

所以我得出结论，没有从缓存中加载 html。

我尝试了不同的Response headers

我的最后一组是这样的：

Cache-control:max-age=31536000
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:1721
Content-Type:text/html; charset=UTF-8
Date:Mon, 29 Jan 2018 00:56:01 GMT
ETag:"c9c67b-f9f0f-56393377f8681"
Expires:Tue, 29 Jan 2019 00:56:01 +0000
Keep-Alive:timeout=5, max=99
Last-Modified:Mon, 29 Jan 2018 00:27:57 +0000
Server:Apache/2.2.34 (Unix) mod_ssl/2.2.34 OpenSSL/1.0.2l DAV/2 PHP/5.6.30
status:200
Vary:Accept-Encoding
x-cache:HIT
X-Powered-By:PHP/5.6.30

有什么我没有考虑到的吗？我在 Mac OS 上使用 Chrome 63。

【问题讨论】：

我遇到了同样的问题。我的网址是这样的 /api/load_angular_template/login?v=1。任何人都知道如何缓存这些 XHR 请求
我自己写了答案。

标签： php jquery html google-chrome browser-cache

【解决方案1】：

没有办法有效地使任何浏览器缓存 html。但它们都缓存 JS 文件。所以我在这里重塑 React JSX :)

阅读更多 es6 规范：8.3.7 React JSX via tagged templates

基本上 es6 现在有了 Web 模板，而且还有更多。

昨天php生成html页面，今天php生成javascript文件。

【讨论】：