Учебники

RequireJS — Оптимизатор

Август 8, 2018

В этой главе мы обсудим оптимизацию в RequireJS. Оптимизатор в RequireJS имеет следующие характеристики:

  • Объединяет файлы сценариев вместе с помощью UglifyJS для использования по умолчанию или Closure Compiler для использования Java

  • Объединяет CSS файлы вместе.

Объединяет файлы сценариев вместе с помощью UglifyJS для использования по умолчанию или Closure Compiler для использования Java

Объединяет CSS файлы вместе.

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

пример

После загрузки файла r.js в папку вашего проекта структура папки должна выглядеть следующим образом: 

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

Ваш HTML-файл будет выглядеть так, как показано ниже — 

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

Ваш файл main.js будет выглядеть так, как показано ниже — 

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

Ваш файл main.css будет выглядеть так, как показано ниже — 

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

Базовая настройка оптимизатора

Вы можете использовать аргументы командной строки или свойства построения профиля для настройки проекта, оба они взаимозаменяемы.

Ниже приведен синтаксис командной строки: 

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

Ниже приводится синтаксис для построения профиля — 

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

После этого вы можете передать имя профиля сборки оптимизатору в командной строке, как показано ниже — 

node r.js -o build.js

Есть некоторые недостатки в синтаксисе аргумента командной строки. Совместное использование аргументов командной строки или свойств построения профиля может преодолеть эти недостатки.

Оптимизация одного файла JS

Чтобы оптимизировать один JS-файл, вам необходимо создать JS-файл, содержащий содержимое всех его зависимостей. Ваш файл должен выглядеть так, как указано ниже — 

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

Теперь вы можете создать файл main.js, в котором есть все зависимости для приложения. Этот файл используется в HTML-файле для загрузки всех файлов JS одним запросом. Обратите внимание, что созданные файлы не должны находиться там в каталоге исходного кода; файлы должны быть в копии проекта.

Использование ресурсов CDN

Оптимизатор не загружает сценарии с использованием сетевых ресурсов / CDN (Content Delivery Network). В случае, если сценарии необходимо загрузить с использованием CDN, необходимо сопоставить эти файлы с именем модуля и загрузить файлы в локальный путь к файлу. Вы можете использовать специальное слово «empty» в конфигурации пути профиля сборки, как показано в следующем синтаксисе: 

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

Основной файл будет выглядеть так, как показано ниже — 

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

Оптимизация одного CSS-файла

CSS-файлы оптимизируются с использованием следующих параметров непосредственно в командной строке, как показано ниже: 

node ../../r.js -o cssIn = main.css out = main-built.css

CSS-файлы также могут быть оптимизированы в файле сборки, используя те же свойства, как показано ниже — 

...
cssIn:"main.css",
out:"main-built.css"
...

Оба вышеуказанных метода разрешены и создадут файл с именем projectfolder / css / mainbuild.css . В этом файле будет правильно настроено содержимое файла main.css, пути url () и удалены комментарии.

Оптимизация всего проекта

Оптимизатор использует профиль сборки для оптимизации всех файлов css и js . В следующем примере создается файл build.js . 

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

Файл build.js указывает RequireJS скопировать все папки приложения (параметр appDir) в созданную выходную папку (параметр dir) и применить все оптимизации к файлам, расположенным в выходной папке. Выполните следующую команду, чтобы создать профиль в папке приложения:

52
Share: