Come combinare (minificare) i componenti Angular 2 compilati?

tentando di minimizzare il codice sorgente compilato di un progetto per la produzione, Sto utilizzando Gulp come task runner.Come combinare (minificare) i componenti Angular 2 compilati?

la fonte file simile a questa,

html

<!--... . . various scripts and styles . . . . . ---> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
<script src="node_modules/angular2/bundles/router.dev.js"></script> 
<script src="node_modules/angular2/bundles/http.dev.js"></script> 

<script> 
    System.config({ 
    packages: {   
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script> 
</head> 
<body> 
    <app></app> 
</body>

mia app struttura di directory è la seguente,

. 
├── main.js 
├── main.js.map 
├── main.ts 
├── main.app.js 
├── main.app.js.map 
├── main.app.ts 
├── x.component1 
│   ├── x.component.one.js 
│   ├── x.component.one.js.map 
│   └── x.component.one.ts 
└── x.component2 
    ├── x.component.two.js 
    ├── x.component.two.js.map 
    └── x.component.two.ts

app/main.ts

import {bootstrap} from 'angular2/platform/browser'; 
import {MyAwesomeApp} from './main.app' 

bootstrap(MyAwesomeApp);

main.app.ts

@Component({ 
    selector: 'app', 
    template: ` 
     <component-1></component-1> 

     <component-2></component-2> 
    `, 
    directives: [Component1, Component2] 
}) 


export class MyAwesomeApp { 

}

poi i componenti,

@Component({ 
    selector: 'component-1', 
    template: ` 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi. 
    ` 
}) 


export class Component1 { 

}

@Component({ 
    selector: 'component-2', 
    template: ` 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi. 
    ` 
}) 


export class Component2 { 

}

Tutti i file vengono compilati tipografico fino a ES5 JavaScript, inoltre hanno bisogno di minified a main.js

Quindi le mie domande sono,

posso eseguire un compito di raccogliere tutte le .js file compilati a minify per un singolo file e fare riferimento a esso come main nel ramo della produzione?
Interrompe l'importazione del sistema modulo {x} da 'y'?
Se si interrompe il sistema di caricamento del modulo, cosa si può fare per concatenare i file su un'applicazione Angular 2?

mia versione dattiloscritto è, 1.8.2

Grazie per qualsiasi aiuto.

fonte

2016-03-05 Rivadiz

Ottima domanda! – user65439

Se si desidera compilare tutti i file TypeScript in uno solo, è necessario utilizzare la proprietà outFile del compilatore TypeScript. È configurabile tramite il plugin gulp-typescript.

In questo modo non è necessario configurare SystemJS caricare il modulo in base a nomi di file:

<script> 
    // Not necessary anymore 
    /* System.config({ 
    packages: {   
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     } 
    } 
    }); */ 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script>

I nomi dei moduli e il loro contenuto sono ora presenti in questo singolo file. Allo stesso modo per i file bundle impacchettati della distribuzione Angular2 (angular2.dev.js, http.dev.js, ...). Per utilizzare questo file, includilo semplicemente in un elemento script.

In questo modo non si interromperà l'importazione dei moduli.

Quindi è possibile ridurre questo singolo file con il plugin uglify di gulp ...

fonte

2016-03-05 07:33:27

Questo non sembra funzionare da me. Se faccio 'System.import ('app/main')' dice che non riesce a trovare il file .. Se faccio 'System.import ('app/main'.js)' carica il file ma nessuna delle funzioni iniziato. Mi manca molto qualcosa qui .. –

Includete il file js in un elemento 'script'? –

Sì, ho questo .. '' e quindi tutti gli script da https://angular.io/docs/ts/latest/quickstart.html .. sotto Librerie sezione prima di esso. Quindi '' è il mio ultimo prima del 'System.import' –

Dato che si sta già utilizzando Gulp, è sufficiente aggiungere webpack all'attività di Gulp per unire tutti i file di origine JavaScript (nonché i sorgenti Angular2) in uno solo. Ecco un esempio di ciò che i webpack.config.js potrebbero apparire come:

module.exports = { 
    entry: './src/app/app', 
    output: { 
    path: __dirname + '/src', publicPath: 'src/', filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.ts'] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/ 
    }] 
    } 
};

Le sezioni pertinenti dai vostri gulpfile.js sono

var webpack = require('webpack-stream'); 
var htmlReplace = require('gulp-html-replace'); 
var gulp = require('gulp'); 

gulp.task('webpack', function() { 
    return gulp.src('src/app/*.ts') 
    .pipe(webpack(require('./webpack.config.js'))) 
    .pipe(gulp.dest('src/')); 
});

Sostituire gulp.dest('src/') con la posizione rilevante che si vuoi che il tuo codice di produzione risieda.

Quindi è necessario elaborare i file HTML per avere i riferimenti di file di origine JavaScript appropriati (anche io n gulpfile.js).

gulp.task('html', ['templates'], function() { 
    return gulp.src('src/index.html') 
    .pipe(htmlReplace({ 
     'js': ['bundle.js'] 
    })) 
    .pipe(gulp.dest('dist/')); 
});

Se si desidera minify i file JavaScript è possibile utilizzare UglifyJS2. (Si noti tuttavia che c'è qualcosa che non va con l'offuscamento, da cui il mangle: false. Vedere questo SO link per ulteriori informazioni). Ecco il rilevanti gulpfile.js contenuti:

gulp.task('js', ['webpack'], function() { 
    return gulp.src('src/bundle.js') 
    .pipe(uglify({ 
      mangle: false 
      })) 
    .pipe(gulp.dest('dist/')); 
});

In questo modo il vostro codice di produzione finisce nella cartella dist da dove è possibile distribuirlo. Ora è la tua scelta se la controlli in un ramo di produzione o no.

Sentitevi liberi di fare riferimento al mio words project on Github se volete vedere una versione funzionante su un'app Angular2 molto piccola.

fonte

2016-03-06 18:39:31 carnun

Imposta il file aumentato di quasi il 50% per me :(non esiste un'altra soluzione? –

** Creare un singolo file da TS con le opzioni in tsconfig.json.

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": true, 
    "noImplicitAny": false, 
    "outDir":"client/build/", 
    "outFile": "client/build/all.js", 
    "declaration": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "server" 
    ], 
    "include": [ 
     "client/*.ts", 
     "client/**/*.ts", 
     "client/**/**/*.ts" 
    ] 
} 

// Include all folders to put to a file.

** costruire il file di output e comprendono quanto segue: Esempio:

<script> 


    // Alternative way is compile in all.js and use the following system config with all the modules added to the bundles. 
    // the bundle at build/all.js contains these modules 
System.config({ 
    bundles: { 
     'client/build/all.js': ['boot','components/all/present','components/main/main','components/register/register','components/login/login','components/home/home','services/userdetails','services/httpprovider'] 
    } 
    }); 

    // when we load 'app/app' the bundle extension interrupts the loading process 
    // and ensures that boot of build/all.js is loaded first 
    System.import('boot'); 


    </script>

** Minify il file all.js come si fa normalmente.

fonte

2016-03-09 04:36:53 Gary

Sembra che la minificazione sia stata aggiunta ora. https: // github. com/Microsoft/tipografico/temi/8 – Gary

Se si utilizza @angular/cli è possibile eseguire

ng build --prod

a Minify e gzip il codice.

fonte

2017-02-21 12:48:38

Come combinare (minificare) i componenti Angular 2 compilati?

risposta

Problemi correlati