Как оптимизировать проект на require.js?

Question

[Олег Драпеза]

Добрый день!

Работаю над старым и достаточно крупным проектом, около 500 скриптов, все загружается через require.js по отдельности, соответственно время загрузки сайта крайне не приличное.

При загрузке подключаются практически все скрипты, поэтому хочется иметь один js файл, без дубликатов и прочего мусора.
Четкого стартового модуля нет, скрипт require, его config и первый скрипт main.js подключаются в html странице:

script.setAttribute("data-main", "/require-config.js?c=" + Date.now().toString());
script.onreadystatechange = script.onload = function (){
    ...
    script.setAttribute("src", "main.js");
    ...
}
script.setAttribute("src", "/lib/requirejs/require.js");

Как оптимизировать require.js приложение, собрать все скрипты (которые подключаются при загрузке сайта) в один файл, и не потерять асинхронность загрузки остальных файлов?

Comments

[Олег Драпеза]

Пробовал вручную r.js с настройками, пробовал три разных плагина из npm - gulp-requirejs-optimize даже минифицировал мне все скрипты, не знаю уж по остальной оптимизации, но в некоторых возникла ошибка при парсинге относительного пути к скрипту (
то есть из пустого define([], function () {}) он делал define(["путь-к-файлу-название-файла.js"], function () {}), и в некоторых случаях оставлял слэши, что ломало билд - define(["путь-к-файлу\название\файла.js"], function () {})
)

[Константин Китманов]

SuperOleg39ru: ну какбэ garbage in — garbage out. Переделайте нормально заголовки скриптов (это ж не то что все приложение переписать), и все заработает.

[Олег Драпеза]

Константин Китманов: А можно поподробнее про заголовки?

Если я написал конфиг файл, и собираю командой "r.js.cmd -o build.js" - оптимизатор выдает ошибку на все подобные зависимости - "require(["/bootstrap/bootstrap.js", ..." потому что ищет их из из корня windows 'C:\bootstrap\bootstrap.js'

Не могу понять, как для зависимостей указать относительный путь.

[Олег Драпеза]

Константин Китманов: Я проверил, вообще каждая зависимость ищется из директории конкретного модуля

[Константин Китманов]

SuperOleg39ru: "/bootstrap/bootstrap.js" это абсолютный путь, вот он его и ищет невесть откуда. Относительный путь начинается с . или ... Если какие-то пути надо подменить на лету, то есть requirejs.org/docs/api.html#config-paths.

define(["путь-к-файлу\название\файла.js"], function () {})

тут виндовые слэши вместо нормальных, r.js их не понимает. Вот это я и имел ввиду про заголовки.

[Олег Драпеза]

Константин Китманов: Большое спасибо, буду все пути править)

[Константин Китманов]

SuperOleg39ru: в моем опыте любые пути, которые не начинаются с . или .. — ведут к проблемам, рано или поздно какая-то часть воркфлоу зарезолвит их неправильно.
Кстати, можете попробовать заменить requirejs на systemjs, оно прекрасно умеет AMD/CommonJS/ES6 даже вперемешку, только конфиг придется поменять. Заодно будет задел на модернизацию.

Answer 1

[bromzh]

webpack + async-loader для него.

Comments

[Олег Драпеза]

Я использую webpack в новых проектах, а это переписывать с require не готов, хоть и очень хочется)