Что посоветуете для динамической загрузки JS и CSS файлов модулей?

Question

[Котик Антон]

Хотел использовать yepnope, но... https://github.com/SlexAxton/yepnope.js#deprecatio...

Начал ковырять RequireJS, но и там беда... requirejs.org/docs/faq-advanced.html#css

Что посоветуете?

Answer 1

[Александр Зеленин]

Посмотри в сторону stealjs в пакете javascriptmvc. Работает очень быстро и довольно круто группирует файлы. В большинстве ситуаций, даже когда надо загрузить несколько зависимостей — они будут грузиться 1 файлом. В общем попробуй, очень круто там всё.

Answer 2

[Сергей Протько]

посоветую отказаться от затеи динамической загрузки css.

Вообще все эти amd/commonjs не для динамической подгрузки модулей придумали, а для разделения проекта и явного указания зависимостей. Просто удобно на момент разработки. Хотя тогда уж лучше использовать ES6 + компиляцию в ES5.

Comments

[Александр Зеленин]

Я не согласен. При правильной подгрузке это очень круто и для конечного пользователя. Зачем ему сразу мегабайты JS кода, когда он только частью функциональности пользуется? Меньше нагрузка на браузер.

[Котик Антон]

Предположим, изначально загружаемый css на странице весит 10Кб. На сайте есть N кнопок, при клике на которые отображаются N разных модулей, стили для каждого из которых весят 100Кб. Вы предлагаете все (10 + N * 100) Кб CSS загружать сразу?

[Александр Зеленин]

@korobochkin конкретизируй вопрос, пожалуйста.

[Sergey Romanov]

@Fesor Как всегда ответы на самом высоком уровне! Нечего добавить.

Answer 3

[Алексей]

Для JS - RequireJS

Для CSS подобный код в index.html:

<script>
function createLink(src){
                var link = document.createElement("link");
                link.type = "text/css";
                link.rel = "stylesheet";
                link.href = src + '?v=' + SYSTEM.cssVersion;
                document.querySelector("head").appendChild(link);
            }

            createLink('css/main.css');
            createLink('vendor/select2/dist/css/select2.css');
</script>

Суть в том: в сам HTML вставляете с CSS необходимым для отрисовки первой страницы, остальной CSS начнёт подгружаться только после полной отрисовки страницы - без блокировки рендеринга.