Ionic 2，Chrome 不断从磁盘缓存加载

Question

我正在开发一个移动应用程序并使用以下命令构建并运行一个在浏览器中运行的版本（引入所有必要的钩子，ionic serve 没有）

ionic build browser --desktop --testing && http-server platforms/browser/www/

昨天和数周以来，这一切都完美无缺。我停止并启动相同的命令，它 builds/compiles 一切，一切都很棒。

然后我更新了GoogleChrome。现在，无论我做什么，Chrome 都会不断从磁盘缓存中提取所有这些资源，即使在我删除并重新创建它们之后也是如此。有什么想法可以解决吗？我不想每次重新加载时都必须清除缓存，这似乎会导致其他问题。

我不知道为什么或如何发生这种变化，我的 Ionic2 应用程序中没有任何项目或配置设置不同。

使用 cmd-shift-R 而不是仅仅使用 cmd-R 来重新加载似乎强制 Chrome 不从磁盘缓存加载但我很困惑，想了解这里发生了什么...

Answer 1

Chrome 缓存很多，但您可以强制它从您的服务器加载资源，而不是使用缓存清除将它们从缓存中取出：

加载模板：

var timestamp = (new Date()).getTime();

$ionicPopup.show({
    scope: $scope,
    title: 'Work!',
    templateUrl: '/templates/roll-timer-popup.html?update='+timestamp
});

加载scripts/stylesheets:

<script src="myscripts.js?update=123..."></script>

<link rel="stylesheet" type="text/css" href="theme.css?update=123...">

对于 script/stylesheets，您可以动态创建它们以及时间戳，然后再插入它们。

或者当你的脚本文件捆绑在一起时，你可以使用脚本将时间戳写入你的最终 index.html 文件中，以便使用 nodejs 脚本进行部署，因为我为我的一个脚本制作了这个脚本项目：

const fs = require('fs');

var filename = process.argv[2];

var regExp = /[.|\w]+[.]js/;
var contentToAttach = ['<!-- CONTENT ATTACHED BY '+process.argv[1]+' -->','you can put other content in here that is put into at the end of your file'];

fs.readFile(filename, {
    flag : 'r',
    encoding: 'utf-8'
},(err, oldFileContent) => {
    if (err) throw err;
    var fileContent = oldFileContent;
    var oldScriptName;
    var now = (new Date()).getTime();
    var lastIndexPos = 0;
    while (oldScriptName = oldFileContent.match(regExp)) {
        var newScriptName = oldScriptName + '?update=' + now;
        var newIndexPos = fileContent.indexOf(oldScriptName);
        if (newIndexPos !== lastIndexPos) {
            fileContent = fileContent.replace(oldScriptName, newScriptName);
            lastIndexPos = newIndexPos;
        }
        else {
            // same filename found
            var fildContentSlice = fileContent.slice(newIndexPos+oldScriptName.length);
            fildContentSlice = fildContentSlice.replace(oldScriptName, newScriptName);
            fileContent = fileContent.slice(0,newIndexPos+oldScriptName.length)+fildContentSlice;
        }
        oldFileContent = oldFileContent.replace(oldScriptName, '');
    }
    var wholeContent = fileContent+'\n\r'+contentToAttach.join('\n\r');
    fs.writeFile(filename,wholeContent, (err) => {
        if (err) throw err;
        console.log('File: '+filename+' is updated!');
    });
});

它在文件中可以找到的每个脚本标签中插入 ?update=123...。要在 shell 中执行此脚本，请写入：

node updateScript.js path_to_your_html_file

希望对您有所帮助。

Ionic 2，Chrome 不断从磁盘缓存加载

Ionic 2, Chrome keeps loading from disk cache

google-chrome

browser-cache

ionic-framework

ionic2