Tengo una aplicación sencilla, inicializado por angular-cli.

A mostrar algunas de las páginas relativas a las 3 rutas. Tengo 3 componentes. En una de esta página yo uso lodash y Angular de 2 módulos HTTP para obtener algunos datos (utilizando RxJS Observables, map y subscribe). Puedo mostrar estos elementos mediante un simple *ngFor.

Pero, a pesar del hecho de que mi aplicación es muy simple, tengo un enorme (en mi opinión) paquete paquete y mapas. No hablo de gzip versiones, pero aunque el tamaño antes de gzipping. Esta pregunta es sólo recomendaciones generales de la investigación.

Algunos resultados de las pruebas:

ng construir

Hash: 8efac7d6208adb8641c1 Tiempo: 10129ms fragmento {0} main.bundle.js,
principal.bundle.mapa (principal) 18.7 kB {3} [inicial] [dado]

fragmento {1} estilos.bundle.css, estilos.bundle.mapa de estilos.bundle.mapa
(estilos) 155 kB {4} [inicial] [dado]

fragmento {2} scripts.bundle.js, secuencias de comandos.bundle.mapa (scripts) de 128 kB
{4} [inicial] [dado]

fragmento {3} vendor.bundle.js por el proveedor.bundle.mapa (vendedor) 3.96 MB
[inicial] [dado]

fragmento {4} inline.bundle.js en línea.bundle.mapa (en línea) 0 bytes
[entrada] [dado]

Esperar: 10Mb proveedor de paquete de paquete para una aplicación sencilla?

ng construir-prod

Hash: 09a5f095e33b2980e7cc Tiempo: 23455ms fragmento {0}
principal.6273b0f04a07a1c2ad6c.bundle.js,
principal.6273b0f04a07a1c2ad6c.bundle.mapa (principal) 18.3 kB {3} [inicial]
[dado]

fragmento {1} estilos.bfdaa4d8a4eb2d0cb019.bundle.css,
los estilos.bfdaa4d8a4eb2d0cb019.bundle.mapa
los estilos.bfdaa4d8a4eb2d0cb019.bundle.mapa (estilos) 154 kB {4} [inicial]
[dado]

fragmento {2} scripts.c5b720a078e5464ec211.bundle.js,
secuencias de comandos.c5b720a078e5464ec211.bundle.mapa (scripts) de 128 kB {4} [inicial]
[dado]

fragmento {3} vendor.07af2467307e17d85438.bundle.js,
proveedor.07af2467307e17d85438.bundle.mapa (vendedor) 3.96 MB [inicial]
[dado]

fragmento {4} inline.a345391d459797f81820.bundle.js,
en la línea.a345391d459797f81820.bundle.mapa (en línea) 0 bytes [entrada]
[dado]

Esperar de nuevo: algo similar proveedor paquete de tamaño de prod?

ng build --prod --aot

Hash: 517e4425ff872bbe3e5b Tiempo: 22856ms fragmento {0}
principal.95eadabace554e3c2b43.bundle.js,
principal.95eadabace554e3c2b43.bundle.mapa (principal) 130 kB {3} [inicial]
[dado]

fragmento {1} estilos.e53a388ae1dd2b7f5434.bundle.css,
los estilos.e53a388ae1dd2b7f5434.bundle.mapa
los estilos.e53a388ae1dd2b7f5434.bundle.mapa (estilos) 154 kB {4} [inicial]
[dado]

fragmento {2} scripts.e5c2c90547f3168a7564.bundle.js,
secuencias de comandos.e5c2c90547f3168a7564.bundle.mapa (scripts) de 128 kB {4} [inicial]
[dado]

fragmento {3} vendor.41a6c1f57136df286f14.bundle.js,
proveedor.41a6c1f57136df286f14.bundle.mapa (vendedor) 2.75 MB [inicial]
[dado]

fragmento {4} inline.97c0403c57a46c6a7920.bundle.js,
en la línea.97c0403c57a46c6a7920.bundle.mapa (en línea) 0 bytes [entrada]
[dado]

ng build --aot

Hash: 040cc91df4df5ffc3c3f Tiempo: 11011ms fragmento {0} main.bundle.js,
principal.bundle.mapa (principal) 130 kB {3} [inicial] [dado]

fragmento {1} estilos.bundle.css, estilos.bundle.mapa de estilos.bundle.mapa
(estilos) 155 kB {4} [inicial] [dado]

fragmento {2} scripts.bundle.js, secuencias de comandos.bundle.mapa (scripts) de 128 kB
{4} [inicial] [dado]

fragmento {3} vendor.bundle.js por el proveedor.bundle.mapa (vendedor) 2.75 MB
[inicial] [dado]

fragmento {4} inline.bundle.js en línea.bundle.mapa (en línea) 0 bytes
[entrada] [dado]

Así un par de preguntas para el despliegue de mi aplicación en prod:

  • ¿Por qué el vendedor de paquetes de tan enorme?
  • Es el árbol de agitación utilizados correctamente por angular-cli?
  • De cómo mejorar este paquete de tamaño?
  • Son .mapa de los archivos necesarios?
  • Son las características de la prueba incluido en los paquetes? Yo no los necesitan en prod.
  • Pregunta genérica: ¿cuáles son los recommanded herramientas para pack para prod? Tal vez angular-cli (utilizando Webpack en el fondo) no es la mejor opción? Podemos hacer mejor?

He buscado en muchas discusiones sobre el Desbordamiento de la Pila, pero no he encontrado ninguna pregunta genérica.

  • Para aprender más acerca de angular 2 aplicación de optimización, echa un vistazo a este: github.com/mgechev/angular-performance-checklist#introduction
  • Pero creo que no nos debe importar mucho, angular-cli va a evolucionar y que las cosas se hagan mejor y mejor. Si usted necesita alguna característica que angulares de la cli no tiene, acaba de presentar un problema en su repo: github.com/angular/angular-cli
  • aunque creo que @Timathon es adecuado en algunas formas, si alguien está tratando de implementar Angular2 en la producción se debe de atención sobre el paquete de los tamaños de como esto afecta directamente el rendimiento de la aplicación. El angular de la lista de comprobación del rendimiento es un gran recurso para ver qué se puede mejorar. el angular equipo está trabajando para reducir el paquete de los tamaños. Emocionado de ver a dónde va!

11 Comentarios

  1. 54

    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

    • Mi mínimo del proyecto es 384kB, consulte github.com/JCornat/min-angular estoy seguro que no es fácil manera de optimizar, pero está cerca de 250kB !
    • se ve bien! Pero su aplicación sólo tiene un único componente. La pregunta es cómo manejar el paquete de los tamaños o más aplicaciones. A menudo AOT no reducir el paquete de los tamaños suficiente, y la gente está obligada a mirar de otra manera a optimizar. Recomiendo a todos que la vean webpack-bundle-analizador. Una muy útil/manera fácil de ver cuál es causar hinchazón
    • Por desgracia, los servicios públicos, tales como sw-precache negarse a tratar con el vendedor de paquetes de más de 2 mb.
    • la pregunta es cómo manejar el paquete de los tamaños o más aplicaciones». Sin su pregunta es «cómo mejorar este paquete de tamaño?», y él está hablando acerca de su mínimo de la aplicación con 3 componentes. De todos modos, hablando de paquetes grandes, el uso de la AngularClass/angular-motor de arranque de configuración, el mismo que en mi repo, mi paquete de tamaño para grandes aplicaciones pasó de 8 MB (4 MB sin los archivos de mapa) a 580kB.
    • Echa un vistazo a este post del blog en el medio acerca de cómo rxjs 5.5 con lettable los operadores pueden reducir el tamaño de la aplicación y contiene una forma de recopilar métricas sobre el tamaño y donde los trozos grandes son procedentes de: hackernoon.com/…
    • Servicio de los trabajadores son ahora compatibles con angulares angular.io/guía/servicio-trabajador-intro
    • Gracias, me has salvado. –prod reducción de la aplicación tamaño de 6 mb de 1.2 Mb. Todavía no es perfecto, pero que aceptar ya que es para uso en pc de escritorio solamente.

  2. 20

    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 🙂

    • Como angular 6 ahora, el vendedor es de 4 mb para solo instalar angular/material y firebase
    • Que es un problema con el angular/material, incluso me he encontrado con ese error. Árbol de agitación no se hace correctamente es probablemente la causa raíz. Con el nuevo renderizador de motor de IVY probablemente estaría resuelto.
  3. 12

    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

    • 2/ he probado el «loadash-es» consejos de el comentario de arriba. Reduce mi paquete de tamaño de 0.08 mb.
    • Que no es mucho! ¿Todavía tiene algo más de la importación de lodash en la forma antigua? Usted no recibirá ninguna ayuda, a menos que todo es importado de la nueva forma.
    • Creo que he sustituido todo. El tamaño no tiene que cambiar de otra manera. Me dio otra punta de abajo (gzip cosa) que nos ha ayudado mucho.
    • Interesante. ¿Qué parte de tu paquete es/fue lodash contribuyendo a? (E. g. el uso de source-map-explorer.)
  4. 11

    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.

    • Lo específico angular de arranque de configuración es el que ayuda a reducir el paquete de tamaño? Es el webpack.config?
    • Sí, es el webpack de configuración que reduce el paquete de tamaño.
    • Gracias por la aclaración 🙂
  5. 6

    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

  6. 5

    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.

  7. 1

    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.

  8. 0

    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

  9. 0

    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.

  10. 0

    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
      }
    }
    

Dejar respuesta

Please enter your comment!
Please enter your name here