javascript - update - uglify-js npm

UglifyJS: concat y minify o viceversa?

Question

Estoy escribiendo una aplicación que utiliza muchos archivos JS. Subrayado, Backbone, jQuery, jQuery plugins para controles deslizantes, varios archivos para modelos, enrutadores, colecciones y vistas.

En mi máquina de desarrollo, cargo cada archivo por separado, pero en producción solo uso un archivo JS (minified, gziped, less http req, etc.).

En mi proceso de compilación, cada archivo se minimiza con UglifyJS y luego se acumula en prod.js. ¿Es esta la manera correcta de construir ese archivo? ¿O debo concatificar cada archivo en prod.js y luego minimizar con UglifyJS?

¡Muchas gracias!

Answer 1

El orden no importaría mucho asumiendo que tienes menos globales flotando alrededor. Habría una diferencia de tamaño de archivo muy mínima. Mi preferencia personal es Concatenar y luego Uglify, lo que le permite generar mapas de fuentes mejores y más precisos en lugar de al revés. (Esto se debe a que los mapas de origen cambian con cada transformación). Me pregunto cuál es el propósito de uglificar archivos más pequeños y luego concatenar. Básicamente, depende de usted y la elección es suya. La concatenación y el desglose parecen más satisfactorios y menos propensos a errores

Answer 2

Me sorprendería que, de cualquier manera, hiciera una diferencia significativa en la sobrecarga de la solicitud de un usuario.

También sugiero que la concatenación de todos estos marcos en un solo archivo puede aumentar la sobrecarga para cada usuario.

¿Por qué?

Cuando se utiliza un marco común / popular como jQuery, etc., tiene sentido alojarlo en una CDN, como Google para aprovechar el almacenamiento en caché del archivo. Si un usuario visitó un sitio web que también utilizó jQuery, no necesitará hacerlo. ¡Descárgalo en absoluto! Sin mencionar la disminución de la latencia geográfica.

Por lo tanto, al crear su propio archivo único, es mucho más probable que el usuario tenga que descargar todo el archivo.

Answer 3

No hará mucha diferencia, ya que las declaraciones de alto nivel (y las variables & c.) No se tocan.

Sin embargo, al usar la opción --lift-vars , podría cambiar. Depende mucho de tu código.

Answer 4

Probé la salida de cada método usando Gulp .

Configuración de prueba

Utilicé 9 archivos JavaScript con un total de 19.15 kB cuando se concatenó (no se minimizó). Cada archivo comienza con un ''use strict''; declaración.

Resultados:

• Concatenar => Uglificar: 7.993 kB
• Uglify => Concatenar: 8.093 kB
• Diferencia: 0.1 kB

Notas:

• Concatenar => Uglificar las tiras 8 de las 9 ''use strict''; declaraciones
• Uglify => Concatenate conserva todo ''use strict''; declaraciones
• Un solo ''use strict''; La declaración es de 13 bytes . 8 × 13 bytes = 104 bytes, lo que representa la diferencia de 0,1 kB.

Pensamientos finales:

Utilice el orden que prefiera.

La diferencia entre estos dos procesos es despreciable . Concatenate => Uglify podría (teóricamente) producir (de manera casi perceptible) archivos más pequeños si se cumplen las dos condiciones siguientes:

• Varios de los archivos individuales comienzan con un ''use strict''; declaración
• Hay muchos archivos individuales

Aquí está el gulpfile.js que utilicé:

var gulp = require(''gulp''),
  concat = require(''gulp-concat''),
  uglify = require(''gulp-uglify'');

var files = [
  ''!app/scripts/**/*Spec.js'', // Exclude test files
  ''app/scripts/**/*.js''
];

// Register tasks
gulp.task(''concat-min'', function() {
  return gulp.src(files)
    .pipe(concat(''script.min.js''))
    .pipe(uglify())
    .pipe(gulp.dest(''dist''));
});

gulp.task(''min-concat'', function() {
  return gulp.src(files)
    .pipe(uglify())
    .pipe(concat(''script.min.js''))
    .pipe(gulp.dest(''dist''));
});

Answer 5

Recomiendo encarecidamente que uses requirejs , usando esa requirejs puedes hacer paquetes o un archivo minimizado y unificado. Por favor, lea la herramienta de optimización .

Sin embargo, como le dijo Widor, no es una buena idea unir TODOS los archivos en uno. Muchas de esas libretas funcionan mejor usando la API de Google (CDN) si siempre usará su aplicación en línea

Answer 6

Siempre los pondría todos en uno y luego los minimizaba.

Una cosa que he empezado a hacer es ejecutarlo aunque http://www.javascriptobfuscator.com/ primero, sé que suena intuitivo pero una de las cosas que hace es almacenar todas las cadenas en una matriz. Está bien, una matriz fea pero detiene la cadena. la repetición luego cuando vas a Tu minified, uso el compilador Google Closure, ordenará las cadenas y a menudo terminarás con un archivo minified mejor