Question

使用最新版单页应用的最佳方法是什么？如何确保用户不必点击 ctrl + F5 来获取最新的页面资源（JS + CSS）？

Answer 1

使用构建器编号对所有对静态文件的引用进行前缀。

而不是/js/app.js，您应该指向/js/123/app.js 123作为内部版本号。

在每次部署时，增加内部版本号。

然后你需要做一些重写，以便服务器在路径中有假文件夹时找到app.js。

当然，在有人关闭浏览器并再次访问该页面或按F5键之前，不会重新加载静态文件。

要解决此问题，您可以使用AJAX请求app.js并查看它是否已被修改：

$.ajax({
    type:"GET",
    url:'/js/123/app.js',
    cache:true,
    ifModified:true,                  
    success:function(data,textStatus,jqXHR){
        console.debug(data);     // Returns undefined when response is 304 Not Modified
    }
});

Answer 2

这是我的解决方案：

PHP：

ob_start(function($data) {
    return preg_replace_callback(
        "(/(?:js|css|img)/.*?\.(?:js|css|png|jpg|gif))",
        function($m) {
            if( file_exists(substr($m[0],1))) return $m[0]."/t=".filemtime(substr($m[0],1));
            else return $m[0];
        },
        str_replace(array_keys($rep),array_values($rep),$data)
    );
});

htaccess的：

RewriteRule (.*)/t=[0-9]+$ /$1

这会自动将特定时间戳附加到所有图像，样式和脚本：修改时间。然后，.htaccess再次将其剥离。

这意味着无论何时更新其中一个文件，缓存版本都会立即失效。经测试可在所有浏览器中完美运行。

Answer 3

使用内部版本编号对静态内容折叠进行前缀是一种很好的方法。为了确保它们始终在构建之后提取最新信息，您需要将该技术与服务器端标记相结合，该标记将html与静态内容的位置一起考虑到内部版本号。当然，如果您正在进行100％角度范式，则不存在服务器端标签，因此您需要违反解决方案的纯度并拥有jsp页面或用户登录后登陆的类似内容（欢迎使用）页面）然后引用您的静态内容。然后，您可以在那里结束服务器端代码，如果您愿意，可以从那时起居住在纯静态布局世界中。

单页面应用程序版本控制

3 个答案: