Требуется оптимизация JS - r.js - как это сделать правильно?

Question

Я пытаюсь оптимизировать свой проект Require JS для одного файла. Я ходил по нескольким учебникам, но ни один из них не работает должным образом.

У меня есть следующие файлы структуру:

scripts/ 
    build/ 
     r.js 
     build.js 
    common/ 
     misc.js 
     slider.js 
    library/ 
     jquery.min.js 
     jquery.colorbox.min.js 
     jquery.scrollTo.min.js 
     ... 
    mobile/ 
     app.js 
     catalogue.js 
     car-images.js 
     ... 
    web/ 
     app.js 
     catalogue.js 
     car-images.js 
     ... 
index.html 

Мне нужно создать 2 файла web.app.js и mobile.app.js. После нескольких попыток мне удалось только уменьшить app.js в каждой папке, но без его зависимостей.

Результат должен быть один-файлы, содержащие все содержимое common, library и web/mobile каталогов, в зависимости от app.js я пытаюсь скомпилировать.

Вот как app.js выглядит (web и mobile похожи):

requirejs.config({ 
    "paths": { 
     'jquery': [ 
      '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min', 
      '../library/jquery.min' 
     ], 
     'colorbox': [ 
      '//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox-min', 
      '../library/jquery.colorbox-min' 
     ], 
     'colorbox-he': [ 
      '//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/i18n/jquery.colorbox-he.min', 
      '../library/jquery.colorbox-he.min' 
     ], 
     'scrollTo': [ 
      '//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.1/jquery.scrollTo.min', 
      '../library/jquery.scrollTo.min' 
     ], 
     'misc': '../common/misc', 
     'slider': '../common/slider' 
    }, 
    "map": { 
     '*': { 
      'colorbox': 'colorbox-he' 
     }, 

     'colorbox-he': { 
      'colorbox': 'colorbox' 
     } 
    }, 
    "shim": { 
     'scrollTo': { 
      'deps': ['jquery'], 
      'exports': 'jQuery.fn.scrollTo' 
     }, 
     'colorbox': { 
      'deps': ['jquery'], 
      'exports': 'jQuery.fn.colorbox' 
     }, 
     'colorbox-he': ['colorbox'], 
     'misc': ['jquery', 'scrollTo'], 
     'car-images': ['jquery', 'colorbox'], 
    } 
}); 

if (typeof require_modules == 'object') { 
    require_modules.push('misc') 
} else { 
    var require_modules = ['misc'] 
} 

require(require_modules); 

Вот конфиг используется:

({ 
    baseUrl: "../web", 
    name: "app", 
    out: "app-built.js" 
}) 

Любая идея, как это право? из-за нескольких файлов и запросов время загрузки довольно длинное.

Заранее благодарен!

Answer 1

Основная проблема заключается в том, что вы просите r.js обработать это:

if (typeof require_modules == 'object') { 
    require_modules.push('misc') 
} else { 
    var require_modules = ['misc'] 
} 

require(require_modules); 

И это не может. documentation ясно:

оптимизатор будет только комбинировать модули, которые указаны в массивах строковых литералов, которые передаются на высший уровень require и define звонков или require('name') строковых литералы вызовов в упрощенном CommonJS упаковке. Так, он не найдет модули, которые загружаются с помощью имени переменной:

var mods = someCondition ? ['a', 'b'] : ['c', 'd']; 
require(mods); 

но «а» и «б» будет включен, если указано так:

require(['a', 'b']); 

К сожалению, r.js просто игнорирует вызовы на require, которые не содержат массив строкового литерала. Вы ничего не предупреждаете об этом.

Чтобы решить эту проблему, у вас может быть одна конфигурация сборки r.js для каждого пакета, который вы хотите создать, и жестко кодировать модули для включения. Более сложным решением было бы использовать что-то вроде esprima для анализа вашего кода и создания конфигураций сборки для каждого пакета. Или вы можете написать скрипт, который менее способен, чем esprima, но может извлекать нужные имена модулей из файлов, написанных в соответствии с принятым вами соглашением. Это во многом зависит от того, как ваши приложения структурированы.

Другие проблемы с вашей конфигурацией ... Вы должны использовать mainConfigFile в своей конфигурации сборки или дублировать значения из вашей конфигурации времени выполнения (например, shim) в свою конфигурацию сборки.Я бы использовал mainConfigFile. Если вы когда-либо используете require звонки, которые не входят в область верхнего уровня, вы также должны использовать findNestedDependencies. Вероятно, вы также захотите removeCombined.

Answer 2

Как сказал Луи, ваша главная проблема с вашим заявлением if.

Хотя Есть много вариантов для вас, я бы подойти к этому с 2 скриптов сборки, указывая на 2 конфигурационных файлах (ваше приложение файлы), например, для компиляции web.app.js:

скрипты/Web/build.js:

({ 
    mainConfigFile: 'app.js', 
    optimize: 'uglify2', 
    name: 'path/to/require.js', /* relative to where you run r.js */ 
    include: ['app'], 
    insertRequire: ['app'], 
    out: '../web.app.js', 
    wrap: true 
}) 

Установка r.js глобально, то выполните следующие действия из скрипты/Web/:

r.js -o build.js 

Примечание: выше только компилировать требуют, MISC и это зависимостей scrollTo & JQuery