Comment regrouper une application angulaire pour la production
Je voudrais suivre et mettre à jour dans ce fil la dernière méthode la plus récente (et, espérons-le la plus simple) pour regrouper Angular (version 2, 4, ...) en vue de sa production sur un serveur Web en direct.
Veuillez inclure la version angulaire dans les réponses afin que nous puissions mieux suivre les prochaines versions.
2.x, 4.x, 5.x, 6.x, 7.x (TypeScript) avec CLI angulaire
Configuration OneTime
npm install -g @angular/cling new projectFoldercrée une nouvelle application
Étape de regroupement
ng build --prod(exécuté en ligne de commande lorsque le répertoire estprojectFolder)indicateur
prodbundle pour la production (voir le Documentation angulaire pour la liste des options incluses avec l'indicateur de production).} _Compresser en utilisant Compression Brotli les ressources en utilisant la commande suivante
for i in dist/*; do brotli $i; done
(les ensembles sont générés par défaut vers projectFolder/dist (/ $ projectFolder pour 6)} _
Sortie
Tailles avec Angular 7.2.5 avec CLI 7.3.1et option CSS sans routage angulaire
dist/main.[hash].bundle.jsVotre application jointe [taille: 151 Ko pour une nouvelle application CLI angulaire vide, 37 Ko compressée].dist/polyfill.[hash].bundle.jsles dépendances polyfill (@angular, RxJS ...) groupées [taille: 41 Ko pour la nouvelle application CLI angulaire vide, 12 Ko compressé].dist/index.htmlpoint d’entrée de votre application.dist/inline.[hash].bundle.jschargeur de webpackdist/style.[hash].bundle.cssles définitions de styledist/assetsressources copiées à partir de la configuration d'actifs Angular CLI
Déploiement
Vous pouvez obtenir un aperçu de votre application à l'aide de la commande ng serve --prod qui démarre un serveur HTTP local, de sorte que l'application contenant les fichiers de production soit accessible à l'aide de http: // localhost: 4200 .
Pour une utilisation en production, vous devez déployer tous les fichiers du dossier dist sur le serveur HTTP de votre choix.
2.0.1 Final utilisant Gulp (TypeScript - Target: ES5)
Configuration OneTime
npm install(exécuté dans cmd quand répertoire est projectFolder)
Regroupement des étapes
npm run bundle(exécuté dans cmd quand répertoire est projectFolder)les ensembles sont générés dans dossierProjet/ensembles /
Sortie
bundles/dependencies.bundle.js[taille: ~ 1 Mo (aussi petit que possible)]- contient des dépendances angulaires et rxjs, pas les frameworks entiers
bundles/app.bundle.js[taille: dépend de votre projet, le mien est ~ 0.5 MB]- contient votre projet
Structure de fichier
- projectFolder/app/ (tous les composants, directives, modèles, etc.)
- projectFolder/gulpfile.js
var gulp = require('gulp'),
tsc = require('gulp-TypeScript'),
Builder = require('systemjs-builder'),
inlineNg2Template = require('gulp-inline-ng2-template');
gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});
gulp.task('inline-templates', function () {
return gulp.src('app/**/*.ts')
.pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true}))
.pipe(tsc({
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false
}))
.pipe(gulp.dest('dist/app'));
});
gulp.task('bundle-app', ['inline-templates'], function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist-systemjs.config.js');
return builder
.bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
gulp.task('bundle-dependencies', ['inline-templates'], function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist-systemjs.config.js');
return builder
.bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
- projectFolder/package.json (identique à Guide de démarrage rapide , vient de montrer devDependencies et les scripts npm nécessaires à l'intégration)
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
***
"gulp": "gulp",
"rimraf": "rimraf",
"bundle": "gulp bundle",
"postbundle": "rimraf dist"
},
"license": "ISC",
"dependencies": {
***
},
"devDependencies": {
"rimraf": "^2.5.2",
"gulp": "^3.9.1",
"gulp-TypeScript": "2.13.6",
"gulp-inline-ng2-template": "2.0.1",
"systemjs-builder": "^0.15.16"
}
}
- projectFolder/systemjs.config.js (identique à Guide de démarrage rapide , n'est plus disponible ici)
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app/boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.asp's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
- projetcFolder/dist-systemjs.config.js (vient de montrer la différence avec systemjs.config.json)
var map = {
'app': 'dist/app',
};
- projectFolder/index.html (production) - L'ordre des balises de script est critique. Le placement de la balise
dist-systemjs.config.jsaprès les balises de paquet permettrait toujours au programme de s'exécuter, mais le paquet de dépendances serait ignoré et les dépendances être chargé à partir du dossiernode_modules.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<base href="/"/>
<title>Angular</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<my-app>
loading...
</my-app>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="dist-systemjs.config.js"></script>
<!-- Project Bundles. Note that these have to be loaded AFTER the systemjs.config script -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>
<script>
System.import('app/boot').catch(function (err) {
console.error(err);
});
</script>
</body>
</html>
- dossierProjet/app/boot.ts est l'endroit où se trouve l'amorçage.
Le mieux que j'ai pu faire encore :)
Angular 2 avec Webpack (sans configuration CLI)
1- Le tutoriel de l'équipe Angular2
L’équipe Angular2 a publié un tutoriel pour utiliser Webpack.
J'ai créé et placé les fichiers du didacticiel dans un petit projet pilote GitHub . Ainsi, vous pouvez rapidement essayer le flux de travail.
Instructions:
npm install
npm start. Pour le developpement. Cela créera un dossier "dist" virtuel qui sera chargé à votre adresse localhost.
npm lance la construction. Pour la production. "Cela créera une version du dossier" dist "physique pouvant être envoyée à un serveur Web. Le dossier dist est de 7,8 Mo mais 234 Ko sont nécessaires pour charger la page dans un navigateur Web.
2 - Un kit de démarrage Webkit
Ce Webpack Starter Kit _ offre davantage de fonctionnalités de test que le didacticiel ci-dessus et semble très populaire.
Processus de production angulaire 2 avec le constructeur et le gouffre SystemJs
Angular.io a un tutoriel de démarrage rapide. J'ai copié ce tutoriel et étendu avec quelques tâches simples pour grouper tout dans un dossier dist qui peut être copié sur un serveur et fonctionne comme ça. J'ai essayé d'optimiser tout pour que Jenkis CI fonctionne correctement, donc node_modules peut être mis en cache et n'a pas besoin d'être copié.
Code source avec l'exemple d'application sur Github: https://github.com/Anjmao/angular2-production-workflow
- Nettoyer les scripts dactylographiés compilés js et le dossier dist
- Compiler les fichiers TypeScript dans le dossier de l'application
- Utilisez le bundle SystemJs pour tout regrouper dans le dossier dist avec les hachages générés pour l'actualisation du cache du navigateur.
- Utilisez gulp-html-replace pour remplacer les scripts index.html par des versions groupées et les copier dans le dossier dist
- Copier tout le contenu du dossier assets dans le dossier dist
Node: Bien que vous puissiez toujours créer votre propre processus de construction, je vous recommande vivement d'utiliser angular-cli, car il nécessite tous les flux de travail et fonctionne parfaitement à présent. Nous l'utilisons déjà en production et n'avons aucun problème avec angular-cli.
CLI angulaire 1.x.x (fonctionne avec les angulaires 4.x.x, 5.x.x)
Cela soutient:
- Angulaire 2.x et 4.x
- Dernières Webpack 2.x
- Compilateur angulaire AoT
- Routage (normal et paresseux)
- SCSS
- Regroupement de fichiers personnalisés (actifs)
- Outils de développement supplémentaires (configurations de test linter, unit et de bout en bout)
La configuration initiale
ng nouveau nom de projet --routing
Vous pouvez ajouter --style=scss pour le support SASS .scss.
Vous pouvez ajouter --ng4 pour utiliser Angular 4 au lieu de Angular 2.
Après avoir créé le projet, la CLI exécutera automatiquement npm install pour vous. Si vous voulez utiliser Yarn à la place, ou si vous voulez juste regarder le squelette du projet sans installer, voyez comment le faire ici .
Étapes Bundle
Dans le dossier du projet:
ng build -prod
Dans la version actuelle, vous devez spécifier --aot manuellement, car il peut être utilisé en mode développement (bien que cela ne soit pas pratique en raison de la lenteur).
Cela effectue également la compilation AoT pour des ensembles encore plus petits (pas de compilateur angulaire, mais une sortie du compilateur générée). Les bundles sont beaucoup plus petits avec AoT si vous utilisez Angular 4 car le code généré est plus petit.
Vous pouvez tester votre application avec AoT en mode développement (cartes source, aucune minification) et AoT en exécutant ng build --aot.
Sortie
Le répertoire de sortie par défaut est ./dist, bien qu'il puisse être modifié dans ./angular-cli.json.
Fichiers déployables
Le résultat de l'étape de construction est le suivant:
(Remarque: <content-hash> fait référence au hachage/empreinte digitale du contenu du fichier censé être un moyen de contourner le cache, ceci est possible puisque Webpack écrit les balises script par lui-même.)
./dist/assets
Fichiers copiés tels quels à partir de./src/assets/**./dist/index.html
À partir de./src/index.html, après y avoir ajouté des scripts webpack
Le fichier de modèle source est configurable dans./angular-cli.json./dist/inline.js
Petit chargeur Webpack/Polyfill./dist/main.<content-hash>.bundle.js
Le fichier principal .js contenant tous les scripts .js générés/importés./dist/styles.<content-hash>.bundle.js
Lorsque vous utilisez les chargeurs Webpack pour CSS, comme dans le cas de la CLI, ils sont chargés via JS ici
Dans les versions plus anciennes, il créait également des versions compressées pour vérifier leur taille et des fichiers .map sourcemaps, mais cela ne se produisait plus car les utilisateurs demandaient constamment de les supprimer.
Autres fichiers
Dans certaines autres occasions, vous pourriez trouver d'autres fichiers/dossiers indésirables:
./out-tsc/
De./src/tsconfig.json'soutDir./out-tsc-e2e/
De./e2e/tsconfig.json'soutDir./dist/ngfactory/
À partir du compilateur AoT (non configurable sans forger la CLI à partir de la version bêta 16)
À ce jour, le livre de recettes Ahead-of-Compilation Compilation constitue toujours la meilleure recette pour la production groupée. Vous pouvez le trouver ici: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
Mon expérience avec Angular 2 jusqu’à présent est que l’AoT crée les versions les plus petites avec un temps de chargement quasi nul. Et le plus important, car la question ici est de savoir que vous devez seulement envoyer quelques fichiers à la production.
Cela semble être dû au fait que le compilateur Angular ne sera pas livré avec les versions de production car les modèles sont compilés "Ahead of Time". Il est également très intéressant de voir votre balise de modèle HTML transformée en instructions javascript qui seraient très difficiles à inverser dans le code HTML d'origine.
J'ai réalisé une vidéo simple dans laquelle je montre la taille du téléchargement, le nombre de fichiers, etc. d'une application Angular 2 dans la version de développement vs développement - que vous pouvez voir ici:
Vous trouverez le code source utilisé dans la vidéo ici:
**Production build with
- Angular Rc5
- Gulp
- typescripts
- systemjs**
1)con-cat all js files and css files include on index.html using "gulp-concat".
- styles.css (all css concat in this files)
- shims.js(all js concat in this files)
2)copy all images and fonts as well as html files with gulp task to "/dist".
3)Bundling -minify angular libraries and app components mentioned in systemjs.config.js file.
Using gulp 'systemjs-builder'
SystemBuilder = require('systemjs-builder'),
gulp.task('system-build', ['tsc'], function () {
var builder = new SystemBuilder();
return builder.loadConfig('systemjs.config.js')
.then(function () {
builder.buildStatic('assets', 'dist/app/app_libs_bundle.js')
})
.then(function () {
del('temp')
})
});
4)Minify bundles using 'gulp-uglify'
jsMinify = require('gulp-uglify'),
gulp.task('minify', function () {
var options = {
mangle: false
};
var js = gulp.src('dist/app/shims.js')
.pipe(jsMinify())
.pipe(gulp.dest('dist/app/'));
var js1 = gulp.src('dist/app/app_libs_bundle.js')
.pipe(jsMinify(options))
.pipe(gulp.dest('dist/app/'));
var css = gulp.src('dist/css/styles.min.css');
return merge(js,js1, css);
});
5) In index.html for production
<html>
<head>
<title>Hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<link rel="stylesheet" href="app/css/styles.min.css" />
<script type="text/javascript" src="app/shims.js"></script>
<base href="/">
</head>
<body>
<my-app>Loading...</my-app>
<script type="text/javascript" src="app/app_libs_bundle.js"></script>
</body>
</html>
6) Now just copy your dist folder to '/www' in wamp server node need to copy node_modules in www.
Vous pouvez déployer votre application angulaire sur github en utilisant angular-cli-ghpages
consultez le lien pour savoir comment déployer à l'aide de ce CLI.
le site Web déployé sera généralement stocké dans une branche de github
gh-pages
utiliser peut cloner la branche git et l'utiliser comme site Web statique sur votre serveur
"Meilleur" dépend du scénario. Parfois, vous ne vous souciez que du plus petit ensemble possible, mais dans les applications volumineuses, vous devrez peut-être envisager un chargement paresseux. À un moment donné, il devient peu pratique de servir l’application entière en un seul paquet.
Dans ce dernier cas, Webpack est généralement la meilleure solution car il prend en charge le fractionnement de code.
Pour un seul paquet, je considérerais le cumul ou le compilateur Closure si vous vous sentez courageux :-)
J'ai créé des exemples de tous les bundles angulaires que j'ai jamais utilisés ici: http://www.syntaxsuccess.com/viewarticle/angular-production-builds
Le code peut être trouvé ici: https://github.com/thelgevold/angular-2-samples
Version angulaire: 4.1.x
Installez simplement angular 4 avec webpack 3 en une minute, votre bundle ENV de développement et de production sera prêt sans problème.
Veuillez essayer ci-dessous la commande CLI dans le répertoire du projet en cours. Il va créer un paquet de dossiers dist. afin que vous puissiez télécharger tous les fichiers dans le dossier dist pour les déploiements.
ng construire --prod --aot --base-href.