504 votos

Gran número de los archivos generados para cada Angular del proyecto

Yo quería empezar un simple hola mundo app para Angular.

Cuando he seguido las instrucciones del oficial de inicio rápido de la instalación creada de 32.000 archivos en mi proyecto.

Me di cuenta de esto es un error o me he perdido algo, así que me decidí a usar angular de la cli, pero después de crear el proyecto, me contó 41,000 archivos.

¿De dónde me salen mal? Me estoy perdiendo algo realmente obvio?

307voto

Bhushan Gadekar Puntos 5854

No hay nada de malo con su configuración.

Angular (desde la versión 2.0) utiliza el mecanismo nacional de prevención de módulos y dependencias para el desarrollo. Esa es la única razón por la que usted está viendo un gran número de archivos.

Una instalación básica de Angular contiene transpiler, tipificaciones de las dependencias que son esenciales para propósitos de desarrollo solamente.

Una vez que haya terminado con el desarrollo, todo lo que necesita hacer es agrupar esta aplicación.

Después de la paquetización de su aplicación, sólo habrá un bundle.js archivo que puede implementar en su servidor.

'transpiler' es sólo un compilador, gracias @omninonsense para añadir que.

127voto

Ankit Singh Puntos 14797
                                Typical Angular2 Project

MECANISMO nacional de prevención de Paquete de Archivos (Desarrollo) del Mundo Real de los Archivos (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

[ ver esto para la agrupación de procesos y neArr; ]

47voto

hurricane Puntos 3520

No hay nada de malo con el desarrollo de la configuración.

Algo anda mal con su producción de configuración.

Al desarrollar un "Angular 2 Proyecto" o "Cualquier Proyecto Que se basa en JS" se puede utilizar en todos los archivos, usted puede probar todos los archivos, usted puede importar todos los archivos. Pero si quieres servir a este proyecto, necesita COMBINAR todos los archivos estructurados y deshacerse de los archivos inútiles.

Hay un montón de opciones para combinar estos archivos juntos:

26voto

swaechter Puntos 719

Como varias personas ya mencionadas: Todos los archivos en su directorio node_modules (MECANISMO nacional de prevención de la ubicación de los paquetes) son parte de su proyecto de dependencias (los llamados dependencias directas). Como una adición a eso, sus dependencias también pueden tener sus propias dependencias y etc etc. (Así se llama transitiva dependencias). Decenas de miles de archivos no son nada especial.

Debido a que sólo se les permite subir 10'000 archivos (Ver comentarios), me gustaría ir con un bundler motor. Este motor se agrupan todos sus JavaScript, CSS, HTML, etc y crear un único paquete (o más si se especifica). Su index.html se carga este paquete y eso es todo.

Yo soy un fan de webpack, así que mi webpack solución será crear un paquete de la aplicación y un proveedor de paquete (Para la jornada completa de trabajo de aplicaciones ver aquí https://github.com/swaechter/project-collection/tree/master/web-angular2-example):

index.html

<!DOCTYPE html>
<html>
<head>
    <base href="http://stackoverflow.com/">
    <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:

  • Completa línea de generación (TS dejan mucho menos mota, compilar, minificación etc.)
  • 3 archivos de implementación --> Sólo un par de solicitud Http

Desventajas:

  • Mayor tiempo de construcción
  • No es la mejor solución fot Http 2 proyectos (Véase el descargo de responsabilidad)

Descargo de responsabilidad: Esta es una buena solución para Http 1.*, debido a que minimiza la sobrecarga para cada solicitud Http. Usted sólo tiene una solicitud para su index.html y cada paquete, pero no la de 100 - 200 archivos. Por el momento, este es el camino a seguir.

Http 2 por otro lado intenta minimizar el Http sobrecarga, por lo que se basa en un protocolo de secuencia. Esta corriente es capaz de comunicarse en ambas direcciones (Cliente <--> Servidor) y como una de las razones de que el más inteligente de los recursos es posible la carga (sólo cargar los archivos necesarios). La secuencia elimina gran parte de la Http de la cabeza (Menos Http viajes de ida y vuelta).

Pero es el mismo como con IPv6: tomará un par de años hasta que la gente realmente va a usar Http 2

20voto

Brocco Puntos 35700

Usted necesita asegurarse de que usted está a solo de la implementación de la dist (corto para distribuible) la carpeta de tu proyecto generado por el Angular de la CLI. Esto permite que la herramienta para tomar el código fuente y las dependencias y sólo dará lo que necesita para ejecutar su aplicación.

Lo que se dice allí es/era un problema con el Angular de la CLI en lo que respecta a la producción se construye a través de `ng construir-prod

Ayer (2 de agosto de 2016) un lanzamiento fue el hecho que cambió el mecanismo de compilación de brócoli + systemjs a webpack que correctamente controla la producción se basa.

Sobre la base de estos pasos:

ng new test-project
ng build --prod

Estoy viendo una dist tamaño de la carpeta de 1.1 MB a través de los 14 archivos se enumeran 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 el webpack versión de la angulares de la cli, debe ejecutar... npm install angular-cli@webpack -g

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X