RequireJS - Optimizador

En este capítulo, discutiremos la optimización en RequireJS. El Optimizador en RequireJS tiene las siguientes características:

Combina archivos de script junto con la ayuda de UglifyJS para uso predeterminado o Closure Compiler para uso de Java
Combina archivos CSS juntos.

El optimizador es un componente del r.jsadaptador para Node y Nashorn . Está desarrollado para ser parte de un proceso de construcción y no para el proceso de desarrollo.

Ejemplo

Después de descargar r.js en la carpeta de su proyecto, la estructura de la carpeta debe verse como se indica a continuación:

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

Su archivo HTML se verá como se muestra a continuación:

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

Su archivo main.js se verá como se muestra a continuación:

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

Su archivo main.css se verá como se muestra a continuación:

@import url("other.css");

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

Configuración básica del optimizador

Puede utilizar los argumentos de la línea de comandos o las propiedades de construcción del perfil para configurar el proyecto, ambos son intercambiables entre sí.

A continuación se muestra la sintaxis de la línea de comandos:

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

A continuación se muestra la sintaxis para crear perfil:

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

Después de esto, puede pasar el nombre del perfil de compilación al optimizador en la línea de comando, como se muestra a continuación:

node r.js -o build.js

Hay algunas deficiencias en la sintaxis de los argumentos de la línea de comandos. Un uso combinado de argumentos de línea de comandos o propiedades de construcción de perfiles puede superar estas deficiencias.

Optimización de un solo archivo JS

Para optimizar un solo archivo JS, debe crear un archivo JS que contenga el contenido de todas sus dependencias. Su archivo debe verse como se indica a continuación:

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

Ahora, puede crear el archivo main.js que tiene todas las dependencias para la aplicación. Este archivo se utiliza en un archivo HTML para cargar todos los archivos JS con una solicitud. Tenga en cuenta que los archivos creados no deben estar en el directorio del código fuente; los archivos deben estar en la copia del proyecto.

Uso de recursos CDN

El optimizador no carga scripts utilizando los recursos de red / CDN (Content Delivery Network). En caso de que los scripts deban cargarse utilizando un CDN, entonces debe asignar estos archivos a un nombre de módulo y descargar los archivos a su ruta de archivo local. Puede utilizar la palabra especial "vacío" en la configuración de la ruta del perfil de compilación como se muestra en la siguiente sintaxis:

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

El archivo principal se verá como se muestra a continuación:

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

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

Optimización de un solo archivo CSS

Los archivos CSS se optimizan utilizando los siguientes parámetros directamente en la línea de comando, como se muestra a continuación:

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

Los archivos CSS también se pueden optimizar en un archivo de compilación utilizando las mismas propiedades que se muestran a continuación:

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

Ambos métodos anteriores están permitidos y crearán un archivo llamado projectfolder / css / mainbuild.css . Este archivo tendrá el contenido de main.css, las rutas url () correctamente ajustadas y los comentarios eliminados.

Optimización del proyecto completo

El optimizador utiliza el perfil de compilación para optimizar todos los css y jsarchivos. En el siguiente ejemplo, se crea el archivo 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"
})

El archivo build.js indica a RequireJS que copie todas las carpetas de la aplicación (parámetro appDir) en la carpeta de salida construida (parámetro dir) y aplique todas las optimizaciones a los archivos ubicados en la carpeta de salida. Ejecute el siguiente comando para crear un perfil en la carpeta de la aplicación:

node r.js -o build.js