Which is better to use: gulp-useref, gulp-concate or another option?

Question

JavaScript

Which plugin to use to optimize queries on multi-page sites?
Or compile all js into one, including libraries?

Answer 1

I use lazy loading. Instead of a map, you can write to localstorage

//регистр всех загруженных данных
window.Registry = {
    Controllers: {},
    Views: {},
    Package: {},
    Middleware: {},
    location: {
        Controller: "",
        Method: ""
    }
};
window.Get = {
    load: function (url) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, false);
        xhr.send();
        if (xhr.status >= 200 && xhr.status < 400) {
            eval(xhr.responseText);
        }
    },
    /**
     * 
     * @param {string} name Имя пакета
     * @returns {Registry.Package}
     */
    Package: function (name) {
        if (Registry.Package[name] === undefined) {
        	this.load("/resources/js/package/" + name + ".js");
        }
        return Registry.Package[name];
    },
    /**
     * 
     * @param {string} name Имя контроллера
     * @param {string} method Метод контроллера
     * @returns bool Вернёт true если найдёт метод в контроллере
     */
    Controllers: function (name, method) {
        Registry.location.Controller = name;
        Registry.location.Method = method;
        if (Registry.Controllers[name] === undefined) {
        	this.load("/resources/js/app/controllers/" + name + ".js");
        }

        if (Registry.Controllers[name][method] === undefined) {
            return false;
        } else {
            Registry.Controllers[name][method]();
            return true;
        }
    },
    Middleware: function (name, data) {
        if (Registry.Middleware[name] === undefined) {
        	this.load("/resources/js/app/middleware/" + name + ".js");
        }

        if (Registry.Middleware[name] === undefined) {
            return false;
        } else {
            Registry.Middleware[name](data);
            return true;
        }
    },
    ViewsSource: function (name) {
        if (Registry.Views[name] === undefined) {
        	var xhr = new XMLHttpRequest();
        	xhr.open('GET', "/resources/js/app/views/" + name + ".tpl", false);
        	xhr.send();
        	if (xhr.status >= 200 && xhr.status < 400) {
       	     Registry.Views[name] = xhr.responseText;
        	} else {
        	    console.error("Ошибка при загрузке вьюшки " + name + ". Исходный урл: /resources/js/app/views/" + name + ".tpl")
       	 }
        }
        return Registry.Views[name];
    },
    /**
     * 
     * @param {type} name Имя вьюшки
     * @param {type} vars обьект с переменными
     * @returns {Registry.Views} содержание вьюшки
     */
    Views: function (name, vars) {
        var v = this.Package("Views");
        document.getElementById("page").innerHTML = v.compile(this.ViewsSource(name), vars);
    }
};