Javascript单页应用程序变得非常难以使用

Question

我是开发团队的一员，负责开发一个单页应用程序，这个应用程序正成为开发的噩梦。目前，我们的构建将所有JS文件缩小为一个文件，因此一旦部署，它就可以快速轻松地缓存，但在开发时，我们有2000多个单独的JS文件，每次刷新时都需要下载。

有人自己遇到过这个问题并找到了解决办法吗。

我想的一个解决方案是，如果你可以缓存每个文件，但每次保存文件时，它也会破坏该文件的缓存。

人们目前使用的一种策略是精简工作空间，但这需要大量时间，因为有太多的依赖关系。

如有任何帮助，我们将不胜感激

Answer 1

问题是，当你执行F5或Ctrl+R（或使用浏览器检查工具）时，发送来获取文件的头文件要求每个文件都不缓存，并解释所有JS，假设你正在处理浏览器项目。

一个可能的易于设置的解决方案是制作一个小型专用HTTP服务器，该服务器查看要服务的文件的修改日期，并且即使浏览器指定了if-modified-since标头（这意味着请求的文件由浏览器缓存），也只返回304 Not Modified标头。

场景：

• 客户端（第二次）向您的localhost:8888 请求带有if-modified-since: Wed, 09 Dec 2015 12:18:00 GMT标头的JS文件

• 如果磁盘上的文件不是最近的，文件服务器会发送一个304头的

• 如果文件较新，则文件服务器流式传输文件，指定Date: Wed, 09 Dec 2015 12:20:00 GMT和cache-control: public, max-age:3600, must-revalidate

编辑：所以这是一个很小的NodeJS文件服务器。只需安装NodeJS，添加npm。将该文件创建为index.js，设置wwwpath变量，在与index.js相同的文件夹中运行npm install node-static（它是下面文件服务器的依赖项），并使用nodejs index.js（或Windows上的node index.js）执行程序。

var static = require('node-static');
var fs = require('fs');
var wwwpath = './www';
var fileServer = new static.Server(wwwpath);
require('http').createServer(function (request, response) {
    request.addListener('end', function () {
        fileServer.serve(request, response, function (err, result) {
            var filepath = wwwpath + request.url;
            // browser is checking cache
            if (request.headers && request.headers['if-modified-since']) {
                var ifModifiedSince = new Date(request.headers['if-modified-since']);
                var stats = fs.statSync(filepath);
                // file has been edited since
                if (stats.mtime.getTime() > (ifModifiedSince.getTime() + 1000)) {  // +1000 Date header is no millisecond accurate
                    response.writeHead(304, 'Not Modified');
                    response.end();
                }
            }
            // file not found / ...
            if (err) {
                response.writeHead(err.status, err.headers);
                response.end();
            }
        });
    }).resume();
}).listen(8080);

它做什么？如果您在wwwroot中有一个文件myscript.js，请使用http://localhost:8080/myscript.js.如果刷新页面，服务器将在流式传输文件之前检查文件的编辑时间。