Gran cantidad de archivos generados para cada proyecto Angular
Quería iniciar una aplicación simple de hola mundo para Angular.
Cuando seguí las instrucciones en el inicio rápido oficial la instalación creó 32.000 archivos en mi proyecto.
Pensé que se trataba de un error o me perdí algo, así que decidí usar angular-cli, pero después de configurar el proyecto conté 41.000 archivos.
¿Dónde me equivoqué? Me estoy perdiendo algo realmente obvio?
13 answers
No hay nada malo con su configuración.
Angular (desde la versión 2.0) utiliza módulos y dependencias npm para el desarrollo. Esa es la única razón por la que está viendo un gran número de archivos.
Una configuración básica de Angular contiene dependencias de transpiler, typings que son esenciales solo para fines de desarrollo.
Una vez que haya terminado con el desarrollo, todo lo que tendrá que hacer es agrupar esta aplicación.
Después de agrupar su solicitud, solo habrá un archivo bundle.js que podrá implementar en su servidor.
'transpilador' es solo un compilador, gracias @ omninonsense por agregar eso.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-29 08:56:58
Typical Angular2 Project
Paquete NPM Archivos (Desarrollo) Archivos del Mundo Real (Implementación)
@angular 3,236 1
rxJS 1,349 1*
core-js 1,341 2
typings 1,488 0
gulp 1,218 0
gulp-typescript 1,243 0
lite-server 5,654 0
systemjs-builder 6,470 0
__________________________________________________________________
Total 21,999 3
*: bundled with @angular
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:48
No hay nada malo con su configuración de desarrollo .
Algo anda mal con su configuración production.
Cuando desarrolla un "Proyecto Angular 2" o "Cualquier Proyecto que se base en JS" puede usar todos los archivos, puede probar todos los archivos, puede importar todos los archivos. Pero si desea servir este proyecto necesita COMBINAR todos los archivos estructurados y deshacerse de los archivos inútiles.
Hay muchas opciones para combinar estos archivos juntos:
- YUI Compresor
- Google Closure Compiler
- Para el lado del servidor (creo que es mejor) GULP
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-02 13:42:58
Como varias personas ya han mencionado: Todos los archivos en su directorio node_modules (ubicación NPM para paquetes) son parte de las dependencias de su proyecto (las llamadas dependencias directas). Como una adición a eso, sus dependencias también pueden tener sus propias dependencias y así sucesivamente, etc. (Las llamadas dependencias transitivas). Varios diez mil archivos no son nada especial.
Debido a que solo se le permite cargar 10'000 archivos (Ver comentarios), yo iría con un motor bundler. Este motor será paquete de todo su JavaScript, CSS, HTML, etc. y cree un solo paquete (o más si los especifica). Tu índice.html cargará este paquete y eso es todo.
Soy fan de webpack, por lo que mi solución webpack creará un paquete de aplicaciones y un paquete de proveedores (Para ver la aplicación completa que funciona, consulte aquí https://github.com/swaechter/project-collection/tree/master/web-angular2-example):
Índice.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Webcms</title>
</head>
<body>
<webcms-application>Applikation wird geladen, bitte warten...</webcms-application>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
Webpack.config.js
var webpack = require("webpack");
var path = require('path');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
/*
* Configuration
*/
module.exports = {
devtool: 'source-map',
debug: true,
entry: {
'main': './app/main.ts'
},
// Bundle configuration
output: {
path: root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
// Include configuration
resolve: {
extensions: ['', '.ts', '.js', '.css', '.html']
},
// Module configuration
module: {
preLoaders: [
// Lint all TypeScript files
{test: /\.ts$/, loader: 'tslint-loader'}
],
loaders: [
// Include all TypeScript files
{test: /\.ts$/, loader: 'ts-loader'},
// Include all HTML files
{test: /\.html$/, loader: 'raw-loader'},
// Include all CSS files
{test: /\.css$/, loader: 'raw-loader'},
]
},
// Plugin configuration
plugins: [
// Bundle all third party libraries
new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}),
// Uglify all bundles
new UglifyJsPlugin({compress: {warnings: false}}),
],
// Linter configuration
tslint: {
emitErrors: false,
failOnHint: false
}
};
// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
Ventajas:
- Línea de compilación completa (linting TS, compilación, minificación, etc.)
- 3 archivos para la implementación {>Solo unas pocas solicitudes Http
Desventajas:
- Mayor tiempo de compilación
- No es la mejor solución para proyectos Http 2 (Ver descargo de responsabilidad)
Descargo de responsabilidad: Esta es una buena solución para Http 1.* , porque minimiza la sobrecarga para cada solicitud Http. Solo tiene una solicitud para su índice.html y cada paquete-pero no para 100-200 archivos. Por el momento, este es el camino a seguir.
Http 2 por otro lado intenta minimizar la sobrecarga Http, por lo que se basa en un protocolo de flujo. Este flujo es capaz de comunicarse en ambas direcciones (Cliente Servidor) y como una razón de más la carga inteligente de recursos es posible (solo se cargan los archivos necesarios). La secuencia elimina gran parte de la sobrecarga Http (Menos Http round trips).
Pero es lo mismo que con IPv6: Tomará algunos años hasta que la gente realmente use Http 2
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-14 14:54:28
Debe asegurarse de que solo está implementando la carpeta dist (abreviatura de distribuible) de su proyecto generada por Angular CLI. Esto permite que la herramienta tome su código fuente y sus dependencias y solo le dé lo que necesita para ejecutar su aplicación.
Dicho esto, hay / hubo un problema con la CLI Angular en lo que respecta a las compilaciones de producción a través de ' ng build pro prod
Ayer (2 de agosto de 2016) se realizó un lanzamiento que cambió la compilación mecanismo de brócoli + systemjs to webpack which successfully handles production builds.
Basado en estos pasos:
ng new test-project
ng build --prod
Estoy viendo un tamaño de carpeta dist de 1.1 MB a través de los 14 archivos listados aquí:
./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js
Nota Actualmente para instalar la versión webpack de angular cli, debe ejecutar... npm install angular-cli@webpack -g
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-03 13:35:38
Angular tiene muchas dependencias, y la versión beta de CLI descarga cuatro veces más archivos.
Así es como crear un proyecto simple tendrá menos archivos ("solo" archivos 10K) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-29 08:57:43
Parece que nadie ha mencionado la Compilación Anticipada como se describe aquí: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
Mi experiencia con Angular hasta ahora es que AoT crea las compilaciones más pequeñas con casi ningún tiempo de carga. Y lo más importante, ya que la pregunta aquí es sobre: solo necesita enviar algunos archivos a producción.
Esto parece deberse a que el compilador Angular no se enviará con las compilaciones de producción, ya que las plantillas son compilado "Ahead of Time". También es muy bueno ver que el marcado de su plantilla HTML se transforma en instrucciones de javascript que serían muy difíciles de aplicar ingeniería inversa al HTML original.
He hecho un video simple donde demuestro el tamaño de la descarga, el número de archivos, etc. para una aplicación Angular en dev vs AoT build-que se puede ver aquí:
Encontrará el código fuente de la demo aquí:
Https://github.com/fintechneo/angular2-templates
Y - como todos los demás dijeron aquí - no hay nada malo cuando hay muchos archivos en su entorno de desarrollo. Así es como es con todas las dependencias que viene con Angular, y muchos otros marcos modernos. Pero la diferencia aquí es que cuando se envía a producción, debería poder empaquetarlo en unos pocos archivos. Además, no quieres todos estos archivos de dependencia en tu repositorio git.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-29 08:58:02
Esto en realidad no es específico de Angular, sucede con casi cualquier proyecto que utiliza el ecosistema NodeJS / npm para sus herramientas.
Esos proyectos están dentro de sus carpetas node_modules, y son las dependencias transititve que sus dependencias directas necesitan ejecutar.
En el ecosistema de nodos, los módulos suelen ser pequeños, lo que significa que en lugar de desarrollar cosas nosotros mismos tendemos a importar la mayor parte de lo que necesitamos bajo la forma de un módulo. Esto puede incluir cosas tan pequeñas como la famosa función left-pad, ¿por qué escribirla nosotros mismos si no es como un ejercicio ?
Así que tener muchos archivos es realmente una buena cosa, significa que todo es muy modular y los autores de módulos reutilizan con frecuencia otros módulos. Esta facilidad de modularidad es probablemente una de las principales razones por las que el ecosistema de nodos creció tan rápido.
En principio, esto no debería causar ningún problema, pero parece que se encuentra con un límite de conteo de archivos de Google app Engine. En ese caso sugiero no subir node_modules a app engine.
En su lugar, compile la aplicación localmente y cargue en google app engine solo los archivos incluidos, pero no lo haga en el propio motor de la aplicación.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-29 08:58:14
Si está utilizando la versión más reciente de angular cli, use ng build --prod
Se creará dist carpeta que tienen menos archivos y la velocidad del proyecto aumentará.
También para probar en local con el mejor rendimiento de angular cli puede usar ng serve --prod
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-21 06:36:54
Si usa Angular CLI, siempre puede usar flag minimal flag cuando crea un proyecto
ng new name --minimal
Acabo de ejecutarlo con el indicador y crea 24 600 archivos y ng build --prod produce una carpeta dist de 212 KB
Así que si no necesitas fuentes de agua en tu proyecto o simplemente quieres probar algo rápidamente, creo que es bastante útil
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-21 14:15:33
Aquí hay una comparación de lo que ocupa más espacio en proyectos angulares.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-15 13:49:10
Si su sistema de archivos soporta enlaces simbólicos, entonces puede al menos relegar todos estos archivos a una carpeta oculta so para que una herramienta inteligente como tree no los muestre por defecto.
mv node_modules .blergyblerp && ln -s .blergyblerp node_modules
El uso de una carpeta oculta para esto también puede fomentar la comprensión de que estos son archivos intermedios relacionados con la compilación que no necesitan guardarse en el control de revisiones -- o usarse directamente en su implementación.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-05 17:19:07
No hay nada malo. Estas son todas las dependencias de nodo que ha mencionado en el paquete.json.
Solo tenga cuidado si ha descargado parte del proyecto git hub, puede tener muchas otras dependencias que no son realmente necesarias para angular 2 first hello world app:)
- asegúrese de tener dependencias angulares - rxjs -trago -typescript - tslint - docker
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-20 17:18:02