如果文件请求被缓存怎么办？

Question

我现在正在使用less = { env: ‘development’ };运行Less to JavaScript，并且我有一个名为main.less的主文件，其中包含我的所有@import，但是没有一个我导入的“子” .less文件正在更新，似乎只是使用旧的缓存样式。

将一行代码放入main.less，编译。删除它并放入nav.less，编译main.less，并且似乎从缓存中抽出nav.less。啊。

我已尝试less.refresh();，甚至尝试了localStorage.clear();，但似乎没有任何改变结果。

我为此感到沮丧。

Answer 1

你说 localStorage.clear（）所以你必须在浏览器中少用。我试图为此构建一个环境，一切都按预期工作。我用了较少的选项如下：

{
      filename: "./test/main.less",
       useFileCache: false
}

html文件如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>test page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="blackmiaool's page">
    <meta name="author" content="blackmiaool">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/less.min.js"></script>
    <script src="js/jquery-2.1.3.js"></script>
</head>

<body>
    <button id="next">Next</button>
    <textarea id="output" placeholder="output" style="height:230px;width:230px;">
       
   </textarea>
    <script type="text/javascript">
        console.log(less);

        function update() {
            $.get("./test/main.less", function(mainFileContent) {
                less.render(mainFileContent, {
                        filename: "./test/main.less",
                        useFileCache: false
                    })
                    .then(function(output) {
                        $("#output").val(output.css);
                        console.log(output);
                    })
            });
        }
        update();
        $("#next").on("click", update);

    </script>
</body>

main.less：

@import "./nav.less";
h5 {
    font-size: 20px;
    color: aliceblue;
}

nav.less：

h4 {
    font-size: 50px;
}

您可以在此处下载演示（您应自行部署）：http://blackmiaool.com/test_less_demo.zip

我是如何尝试重现问题的

打开页面
打开 main.less
删除第color: aliceblue;行
保存 main.less
打开 nav.less
将第color: aliceblue;行转换为第二行。
保存 nav.less
点击“下一步”按钮

输出已从

h4 {
    font-size: 50px;
}
h5 {
    font-size: 20px;
    color: aliceblue;
}

到

h4 {
    font-size: 50px;
    color: aliceblue;
}
h5 {
    font-size: 20px;
}

如果文件请求被缓存怎么办？

Less的文件请求代码（来自less）：

FileManager.prototype.doXHR = function doXHR(url, type, callback, errback)     {

    var xhr = new XMLHttpRequest();
    var async = options.isFileProtocol ? options.fileAsync : true;

    if (typeof xhr.overrideMimeType === 'function') {
        xhr.overrideMimeType('text/css');
    }
    logger.debug("XHR: Getting '" + url + "'");
    xhr.open('GET', url, async);

根据此代码段，少用xhr来获取文件（当然）。所以我们可以尝试破解XMLHttpRequest来更改网址：

var preOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
    var args = Array.prototype.slice.call(arguments, 0);
    if (url.match(/\.less$/)) {
        url += `?time=${Date.now()}`;
        args[1]=url;
    }            
    return preOpen.apply(this, args);
}

Demo

然后打开“网络”标签以检查较少的文件请求。

Less.js积极地缓存导入的较少文件

1 个答案:

我是如何尝试重现问题的

如果文件请求被缓存怎么办？