Question

我正在开发大型JavaScript应用程序，我的任务是对前端应用程序性能进行一些改进。一个点击应用程序需要的是初始页面加载和HTTP请求的数量。我正在处理的应用目前不使用任何缩小或连接。

最佳实践表明，最好将所有应用程序文件缩小并连接到单个文件中。这将是我将采取的典型方法。在这种情况下，我还要考虑其他因素：

正在缓存一些依赖项，以便在不同的应用程序（如jQuery，jQuery UI等）中使用。
某些依赖项经常更新，不受相同的缓存策略的约束

代码以相当令人讨厌的方式加载依赖项。对于上下文：

var loadDependencies = function (onFilesReadyCallback) {

var files = [
    [
        '/libs/cached/js/lib1.js', // Cached
        '/libs/cached/js/lib2.js', // Cached
        '/libs/cached/js/lib3.js', // Cached
        '/libs/js/lib4.js', // Not cached
        '/libs/cached/js/lib5.js', // Cached
        '/libs/cached/js/lib6.js', // Cached
        '/libs/cached/js/lib7.js', // Cached
        '/libs/js/lib8.js', // Not cached
        '/libs/cached/js/lib9.js', // Cached
        '/libs/js/lib10.js', // Not cached
    ],
    [
        '/libs/js/lib11.js', // Not cached
    ],
    [
        '/libs/cached/js/lib12.js', // Cached
    ]
];

var appScriptElement = document.querySelector('script[src*="app.js"]');

var loadFiles = function (files, onFilesLoaded) {
    var filesLoaded = 0;
    var filesCount = files.length;

    (function onTimer() {
        if (filesLoaded === filesCount) {
            if ('function' === typeof onFilesLoaded) {
                onFilesLoaded();
            }
            return;
        }

        window.setTimeout(onTimer, 50);
    })();

    for (var i = 0; i < filesCount; i++) {
        var filename = files[i];

        if (filename.indexOf('.js') > -1 && !document.querySelector('script[src*="' + filename + '"]')) {
            var scriptElement = document.createElement('script');
            scriptElement.src = filename;
            scriptElement.addEventListener('load', function (event) {
                filesLoaded += 1;
            });
            appScriptElement.parentNode.appendChild(scriptElement, appScriptElement);
        } else {
            // Previously loaded this file
            filesLoaded += 1;
        }
    }
};

var onReady = function () {
    if ('function' === typeof onFilesReadyCallback) {
        onFilesReadyCallback();
    }
};

loadFiles(files[0], function () {
    loadFiles(files[1], function () {
        loadFiles(files[2], onReady);
    });
});

};

我要改变加载策略。我的直觉是使用gulp / grunt将所有依赖关系连接到uglify，但我想要考虑缓存一些资源。加载几个缓存的依赖项会比加载一个单独的未缓存的应用程序文件更好吗？有没有人对加载具有混合缓存策略的JS文件有任何想法或建议？

app JS的缩小和连接的方法

0 个答案: