RequireJS - Otimizador

Neste capítulo, discutiremos a otimização no RequireJS. O Otimizador em RequireJS tem as seguintes características -

Combina arquivos de script com a ajuda de UglifyJS para uso padrão ou Closure Compiler para uso Java
Combina arquivos CSS juntos.

O otimizador é um componente do r.jsadaptador para Node e Nashorn . Ele é desenvolvido para fazer parte de um processo de construção e não para o processo de desenvolvimento.

Exemplo

Depois de baixar o r.js na pasta do projeto, a estrutura da pasta deve ser a seguinte -

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

Seu arquivo HTML terá a aparência mostrada abaixo -

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

Seu arquivo main.js terá a aparência mostrada abaixo -

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

Seu arquivo main.css será semelhante ao mostrado abaixo -

@import url("other.css");

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

Configuração básica do otimizador

Você pode usar os argumentos da linha de comando ou propriedades de construção de perfil para definir o projeto, ambos podem ser trocados entre si.

A seguir está a sintaxe para linha de comando -

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

A seguir está a sintaxe para construir o perfil -

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

Depois disso, você pode passar o nome do perfil de construção para o otimizador na linha de comando, conforme mostrado abaixo -

node r.js -o build.js

Existem algumas deficiências na sintaxe do argumento da linha de comando. O uso combinado de argumentos de linha de comando ou propriedades de construção de perfil pode superar essas deficiências.

Otimizando um único arquivo JS

Para otimizar um único arquivo JS, você precisa criar um arquivo JS que contenha o conteúdo de todas as suas dependências. Seu arquivo deve ter a seguinte aparência -

({
   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"
})

Agora, você pode criar o arquivo main.js que contém todas as dependências do aplicativo. Este arquivo é usado em arquivo HTML para carregar todos os arquivos JS com uma solicitação. Observe que os arquivos criados não devem estar no diretório do código-fonte; os arquivos devem estar na cópia do projeto.

Uso de recursos CDN

O otimizador não carrega scripts usando os recursos de rede / CDN (Content Delivery Network). No caso, os scripts precisam ser carregados usando um CDN, então você precisa mapear esses arquivos para um nome de módulo e baixar os arquivos para o caminho de arquivo local. Você pode usar a palavra especial "vazio" na configuração do caminho do perfil de construção, conforme mostrado na seguinte sintaxe -

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

O arquivo principal será semelhante ao mostrado abaixo -

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

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

Otimizando Arquivo CSS Único

Os arquivos CSS são otimizados usando os seguintes parâmetros diretamente na linha de comando, conforme mostrado abaixo -

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

Os arquivos CSS também podem ser otimizados em um arquivo de construção usando as mesmas propriedades mostradas abaixo -

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

Ambos os métodos acima são permitidos e irão criar um arquivo chamado projectfolder / css / mainbuild.css . Este arquivo terá o conteúdo de main.css, os caminhos url () devidamente ajustados e os comentários removidos.

Otimizando todo o projeto

O otimizador usa o perfil de construção para otimizar todos os css e jsarquivos. No exemplo a seguir, o arquivo build.js é criado.

({
   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"
})

O arquivo build.js instrui o RequireJS a copiar todas as pastas do aplicativo (parâmetro appDir) para a pasta de saída construída (parâmetro dir) e aplicar todas as otimizações aos arquivos localizados na pasta de saída. Execute o seguinte comando para criar um perfil na pasta do aplicativo -

node r.js -o build.js