Cómo disminuir prod paquete de tamaño?

Actualización De Octubre De 2018

Ya que esta respuesta tiene un montón de tracción, pensé que sería mejor para actualizarlo con los nuevos Angular optimizaciones:

1. Como otro usuario dijo, ng build --prod --build-optimizer es una buena opción para las personas que utilizan menos de Angular v5. Para las versiones más recientes, esto se hace por defecto con ng build --prod
2. Otra opción es utilizar el módulo de fragmentación y carga diferida mejor dividir su aplicación en partes más pequeñas
3. Ivy motor de renderizado, aunque no en la producción, sin embargo, pronto se ofrecerá un mejor paquete de los tamaños de
4. Asegúrese de que su 3er partido deps son árbol shakeable. Si no estás usando Rxjs v6, sin embargo, usted debe ser.
5. Si todo lo demás falla, use una herramienta como webpack-bundle-analizador de para ver cuál es la causa de la hinchazón en sus módulos

Algunas de las reivindicaciones que el uso de AOT compilación puede reducir el proveedor del paquete de tamaño a 250kb. Sin embargo, en BlackHoleGalaxy el ejemplo, se utiliza el AOT compilación y todavía está a la izquierda con un proveedor de paquete de tamaño de 2.75 MB con ng build --prod --aot, 10 veces más grande que el supuesto de 250kb. Esto no está fuera de la norma para angular2 las aplicaciones, incluso si usted está usando la v4.0. 2.75 MB todavía es demasiado grande para cualquier persona que realmente se preocupa por el rendimiento, especialmente en un dispositivo móvil.

Hay algunas cosas que usted puede hacer para ayudar a que el rendimiento de la aplicación:

1) AOT & Árbol de Agitación (angular de la cli no esta fuera de la caja)

2) Usando Angular Universal A. K. A. procesamiento del lado del servidor (no en cli)

3) Web de los Trabajadores (de nuevo, no en la cli, pero una muy característica solicitada)

ver: https://github.com/angular/angular-cli/issues/2305

4) Trabajadores De Los Servicios

ver: https://github.com/angular/angular-cli/issues/4006

Puede que no necesite todos estos en una sola aplicación, pero estas son algunas de las opciones que están actualmente presentes para la optimización de los Angular de rendimiento. Yo creo/espero que Google es consciente de la salida de la caja deficiencias en términos de desempeño y planes para mejorar esta situación en el futuro.

Aquí es una referencia que habla más en profundidad sobre algunos de los conceptos que he mencionado anteriormente:

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

Utilizar la última angular de la versión cli y el uso de comandos ng construir-prod –build-optimizador de
Sin duda reducir el tamaño de la construcción para prod env.

Esto es lo que el construir optimizador bajo el capó:

La construcción optimizer tiene dos trabajos principales.
En primer lugar, somos capaces de marcar las partes de su solicitud como puro,esto mejora el árbol de agitación proporcionada por las herramientas existentes, la eliminación de otras partes de la aplicación que no son necesarios.

La segunda cosa que la acumulación optimizador hace es eliminar Angular de los decoradores de la aplicación del código en tiempo de ejecución. Los decoradores son utilizados por el compilador, y no son necesarios en tiempo de ejecución y puede ser eliminado. Cada uno de estos trabajos disminuir el tamaño de tu JavaScript haces, y aumentar la velocidad de inicio de la aplicación para los usuarios.

Nota : Una actualización para Angular 5, el ng construir-prod automáticamente proceso anterior 🙂

Lodash puede contribuir a un error fragmento de código en su paquete dependiendo de cómo importar de ella. Por ejemplo:

//includes the entire package (very large)
import * as _ from 'lodash';

//depending on your buildchain, may still include the entire package
import { flatten } from 'lodash';

//imports only the code needed for `flatten`
import flatten from 'lodash-es/flatten'

Personalmente yo todavía quería más pequeñas huellas de mis funciones de utilidad. E. g. flatten pueden contribuir a 1.2K a su paquete, después de minimización. Así que he estado construyendo una colección de las simplificado lodash funciones. La implementación de mi acoplar contribuye alrededor de 50 bytes. Usted puede ver aquí, a ver si te funciona: https://github.com/simontonsoftware/micro-dash

En primer lugar, proveedor de paquetes son enormes, simplemente porque Angular 2 se basa en una gran cantidad de bibliotecas. Tamaño mínimo de Angular 2 app es de alrededor de 500 kb (250KB en algunos casos, véase la parte inferior del poste).

Árbol de agitación se utiliza adecuadamente por angular-cli.

Hacer no incluyen .map archivos, ya que se utiliza sólo para la depuración. Por otra parte, si utiliza caliente módulo de repuesto, eliminar a aclarar proveedor.

Para pack para la producción, me personnaly uso Webpack (y angular de la cli se basa demasiado en ella), porque realmente se puede configure everything para la optimización o la depuración.

Si desea utilizar Webpack, estoy de acuerdo en que es un poco complicado a primera vista, pero ver tutoriales en la red, usted no será decepcionado.

Otra cosa, el uso de angular-cli, que hacer el trabajo muy bien.

Utilizando Por delante-de-tiempo de compilación es obligatorio para optimizar las aplicaciones y la reducción Angular 2 app para 250KB.

Aquí es un repo que he creado (github.com/JCornat/min-angular) para la prueba de mínima Angular paquete de tamaño, y puedo obtener 384kB. Estoy seguro de que no hay manera fácil de optimizar.

Hablando de grandes aplicaciones, el uso de la AngularClass/angular-starter de configuración, el mismo que en la repo de arriba, mi paquete de tamaño para grandes aplicaciones (150+ componentes) fue de 8MB (4MB sin los archivos de mapa) a 580kB.

La siguiente solución se supone que están sirviendo a su dist/carpeta con nodejs. Por favor, utilice el siguiente app.js en el nivel raíz

const express = require('express'),http = require('http'),path = require('path'),compression = require('compression');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));
app.use(compression()) //compressing dist folder 
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
})

const port = process.env.PORT || '4201';
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log('Running at port ' + port))

Asegúrese de instalar las dependencias;

npm install compression --save
npm install express --save;

Ahora construir la aplicación

ng build --prod --build-optimizer

Si quieres comprimir más la acumulación decir reducir 300 kb(aprox.)
de , a continuación, siga el siguiente proceso;

Crear una carpeta llamada vendor dentro de la src carpeta y dentro de proveedor carpeta crear un archivo rxjs.ts y pegar a continuación el código en él;

export {Subject} from 'rxjs/Subject';
export {Observable} from 'rxjs/Observable';
export {Subscription} from 'rxjs/Subscription';

Y, a continuación, agregue el siguiente en la tsconfig.json archivo en su angular de la cli de aplicación. A continuación, en la compilerOptions , agregue la siguiente json;

"paths": {
      "rxjs": [
        "./vendor/rxjs.ts"
      ]
    }

Esto hará que su tamaño de manera demasiado menor. En mi proyecto he reducido el tamaño de 11 mb a 1 mb.
Espero que ayude

Una cosa que me gustaría compartir es cómo las bibliotecas importadas aumentar el tamaño de la dist. Yo había angular2-paquete momento importados, mientras que yo podría hacer todas la fecha y hora formato que requiere el uso de la norma DatePipe exportado de @angular/común.

Con Angular2 Momento "angular2-moment": "^1.6.0",

fragmento {0} polyfills.036982dc15bb5fc67cb8.bundle.js (polyfills) 191
kB {4} [inicial] [dado] fragmento {1}
principal.e7496551a26816427b68.bundle.js (principal) 2.2 MB {3} [inicial]
[dado] fragmento {2} estilos.056656ed596d26ba0192.bundle.css
(estilos) 69 bytes {4} [inicial] [dado] fragmento {3}
proveedor.62c2cfe0ca794a5006d1.bundle.js (vendedor) 3.84 MB [inicial]
[dado] fragmento {4} inline.0b9c3de53405d705e757.bundle.js (en línea)
0 bytes [entrada] [dado]

Después de la eliminación de Angular2 momento-y en el uso de DatePipe lugar

fragmento {0} polyfills.036982dc15bb5fc67cb8.bundle.js (polyfills) 191
kB {4} [inicial] [dado] fragmento {1}
principal.f2b62721788695a4655c.bundle.js (principal) 2.2 MB {3} [inicial]
[dado] fragmento {2} estilos.056656ed596d26ba0192.bundle.css
(estilos) 69 bytes {4} [inicial] [dado] fragmento {3}
proveedor.e1de06303258c58c9d01.bundle.js (vendedor) 3.35 MB [inicial]
[dado] fragmento {4} inline.3ae24861b3637391ba70.bundle.js (en línea)
0 bytes [entrada] [dado]

Nota el proveedor del paquete ha reducido la mitad de un Megabyte!

Punto, vale la pena revisar lo que angulares estándar de los paquetes puede hacer, incluso si usted ya está familiarizado con un externo lib.

Otra manera de reducir el bundle, es servir GZIP en lugar de JS. Nos pasó de 2.6 mb a 543ko.

https://httpd.apache.org/docs/2.4/mod/mod_deflate.html

Esto hizo disminuir el tamaño en mi caso:

ng build --prod --build-optimizer --optimization

Tamaño después de ejecutar este comando reducido de 1,7 MB a 1.2 MB, pero no lo suficiente para mi propósito de la producción.

Yo trabajo en facebook messenger plataforma y messenger apps necesitan ser menor de 1 mb para ejecutar en mensajero de la plataforma. Estado tratando de encontrar una solución eficaz para el árbol temblando, pero no ha habido suerte.

Tengo un angular 5 + muelle de arranque de la aplicación(la aplicación.propiedades 1.3+) con la ayuda de compresión(link adjunto) fue capaz de reducir el tamaño de la principal.bundle.ts tamaño de 2.7 MB a 530 KB.

También por defecto, aot y-construir-optimizador están habilitados con –prod modo que usted no necesita especificar de ellos por separado.

https://stackoverflow.com/a/28216983/9491345

Comprobar que se han configuración denominada «producción» para ng construir, prod, ya que es la abreviatura de ng construir –configuración=producción
La respuesta No resuelve mi problema, porque el problema estaba sentado justo en frente de la pantalla. Creo que esto podría ser bastante común…
He internacionalización de las app con i18n cambiar el nombre de todas las configuraciones, por ejemplo, la producción-en.
Luego he construido con ng construir-prod suponiendo, que el defecto de optimización se utiliza y debe ser cercana a la óptima, pero en realidad sólo ng ha sido ejecutado resultando en 7mb paquete en lugar de 250kb.

Si usted está usando Angular 8+ y desea reducir el tamaño del paquete que se puede utilizar la Hiedra.
Basta con ir a src/tsconfig.app.json y agregar el angularCompilerOptions parámetro, por ejemplo:

{
  "extends": ...,
  "compilerOptions":...,
  "exclude": ...,

/* add this one */
  "angularCompilerOptions": {
    "enableIvy": true
  }
}