Оптимизация кода с помощью RequireJS: как это делается и для чего это нужно

[serf]

Как-то мне кажется в наше время слишком громко называть объединение файлов оптимизацией, особенно оптимизацией кода, оптимизацией загрузки еще может быть. Вообще мне хватает browserify + gulp, всякие поделки не нужны.

[Fesor]

ES6 + babel + System.js

[serf]

ES6 я еще не исопльзую. Если начинать новые проекты ES6 + babel конечно хорошо.

[k12th]

Ну вообще-то загружать склеенную статику оптимальней, как ни крути.
r.js вроде бы поддерживает uglify, странно, что у автора это не упомянуто.

[rozboris]

Спасибо за статью. У меня вопрос — есть веб-приложение в 15000 строк кода на JS. Есть много файлов, написанных на коленке и по-старинке, не модульно. Я уже несколько месяцев пытаюсь всё это причесать и вот что пока получилось — содержимое каждого файла обернуто в closure, из него экспортируются конкретные функции, то есть глобальный неймспейс чистый (в него кладется всего один объект с именем файла).
Это позволяет точно знать, откуда вызывается та или иная, бывшая ранее глобальной, функция. Также это мне позволило сделать всему коду JSHint и скомпилировать всё через Google Closure Compiler (simple, не advanced).
Я несколько раз пытался перевести все эти файлы в формат AMD, но сталкивался с круговыми зависимостями — каждый «модуль» использует функции из 2-6 других модулей, всего модулей около 25. Насколько я понимаю, RequireJS не умеет нормально работать с круговыми зависимостями и предлагает от них отказаться. Это здорово, но в моем случае пока невозможно.
Вы не можете посоветовать чего-нибудь в такой ситуации? У меня совсем нет опыта в RequireJS и я хотел изучить его на этом проекте, но вот, видимо, не судьба.

Заранее спасибо.

[Fesor]

Вы не можете посоветовать чего-нибудь в такой ситуации?

я уже выше написал… но повторюсь…
ES6 + babel + System.js

[rozboris]

В смысле, всё переписать? Ну, это понятно. Вопрос, что сделать с этим кодом, не переписывая.

[Fesor]

Почему же? Оставьте как есть, просто переведите все на ES6 (или правильнее ES2015). Код для этого менять не нужно. Зато можно заюзать модули и постепенно причесывать проект. Собирать в прод рекомендую при помощи es6-module-transpiler и потом уже прогонять все через babel (и то если у вас кроме модулей еще чего юзается, например классы или стрелочные функции). Грубо говоря:

// было

window.someModule = (function () {
    var somePrivateVar;

    return {
        someMethod: someMethod
    }

    function someMethod() {}
}());

// с приходом ES2015
// собственно не особо чего поменялось
// просто можно смело убрать IIFE 
var somePrivateVar;

export default {
    someMethod: someMethod
}

function someMethod() {}

// много позже может стать:

export default class SomeModule {
    constructor() {
    }

    someMethod () {
    }
}

[arusakov]

Requirejs… Используйте CommonJS модули в комплекте с browserify или webpack. У них runtime меньше, в мир npm интегрироваться проще.
Статья уже устарела на несколько лет.

[Fesor]

Можно вообще без рантайма собрать при желании. Именно по этой причине я использую es6-module-transpiler — там один из форматтеров — bundler — просто оборачивает все модули в IIFE и в нужном порядке все разруливает. Собирается все на ура, даже с учетом циклических зависимостей. А оверхэд по названиям функций и переменных устраняется аглификаторами.

[spmbt]

ES6 + babel + System.js?

[Fesor]

Это для разработки, модули пока не поддерживаются ни в одном браузере нативно… только через полифил. Для продакшена я все же собирать это должен как-то. HTTP2 пока не так уж и популярен.

[Jabher]

Я не знаю почему, но почему-то все адепты AMD-модулей так же судорожно любят Backbone, bower и grunt. Какое-то иррациональное комбо мазохиста. Вот и тут.

[enleur]

А какая альтернатива? Я так понимаю: requirejs/amd -> browserify/commonjs, bower -> npm, grunt -> gulp, backbone -> react или angular?

[Fesor]

Ну в этом есть определенная логика. Если человек осознал всю прелесть модульного подхода и загрузчиков модулей (AMD, CommonJS, ES6 модули) то значит радость от использования grunt/gulp и bower он уже получил. А поскольку можно выполнить одну команду и подключить какую-нибудь библиотечку или фреймворк — можно таскать быстреньки и backbone/angular/react/ember… и не писать велосипеды.

[k12th]

AMD проще дружится с bower, чем с npm (потому что авторы npm ниасилили настройку «npm_modules» в конфиге).
browserify тоже не сахар — AMD хотя бы в одном месте конфигурится, и 99% проблем решается добавлением строчки в секцию shim. Еще одно мощное преимущество AMD: несклеенные файлы в dev-окружении — что критично на проекте с поддержкой старых браузеров.

Ну и потом, если человек пришел к необходимости модульной загрузки и MV* на клиенте задолго до появления хипстеров angular и browserify — то ему ничего не оставалось, кроме как использовать Backbone и AMD, а если стэк у тебя отработан, то не всегда охота его менять.

[kambur]

Вы видимо не внимательно прочитали заголовок статьи. Там не написано «RequireJS и Backbone — панацея от всего на свете». Цель, с которой была написана эта статья — это рассказать о возможности оптимизации проектов на Require, а совсем не популяризация этой библиотеки.