¿Cuál es el mejor método para agrupar Angular (versión 2, 4, 6, ...) para la producción en un servidor web en vivo?
Incluya la versión angular en las respuestas para que podamos realizar un mejor seguimiento cuando se mueva a versiones posteriores.
¿Cuál es el mejor método para agrupar Angular (versión 2, 4, 6, ...) para la producción en un servidor web en vivo?
Incluya la versión angular en las respuestas para que podamos realizar un mejor seguimiento cuando se mueva a versiones posteriores.
Respuestas:
2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x
(TypeScript) con CLI angularnpm install -g @angular/cli
ng new projectFolder
crea una nueva aplicaciónng build --prod
(ejecutar en la línea de comando cuando el directorio es projectFolder
)
prod
paquete de banderas para producción (consulte la documentación angular para la lista de opciones incluidas con la bandera de producción).
Comprimir usando Brotli comprimir los recursos usando el siguiente comando
for i in dist/*; do brotli $i; done
los paquetes se generan por defecto en projectFolder / dist (/ $ projectFolder para 6)
Tamaños con angular 9.0.0
con CLI 9.0.1
y opción CSS sin enrutamiento angular
dist/main-[es-version].[hash].js
Su aplicación incluida [tamaño ES5: 158 KB para la nueva aplicación CLI angular vacía, 40 KB comprimida].dist/polyfill-[es-version].[hash].bundle.js
las dependencias de polyfill (@angular, RxJS ...) agrupadas [tamaño ES5: 127 KB para la nueva aplicación CLI angular vacía, 37 KB comprimida].dist/index.html
punto de entrada de su solicitud.dist/runtime-[es-version].[hash].bundle.js
cargador de paquetes webdist/style.[hash].bundle.css
las definiciones de estilodist/assets
recursos copiados de la configuración de activos de CLI angularPuede obtener una vista previa de su aplicación utilizando el ng serve --prod
comando que inicia un servidor HTTP local de modo que se pueda acceder a la aplicación con archivos de producción utilizando http: // localhost: 4200 .
Para un uso de producción, debe implementar todos los archivos de la dist
carpeta en el servidor HTTP que elija.
2.0.1 Final
utilizando Gulp (TypeScript - Target: ES5)npm install
(ejecutar en cmd cuando direcory es projectFolder)npm run bundle
(ejecutar en cmd cuando direcory es projectFolder)
los paquetes se generan para projectFolder / bundles /
bundles/dependencies.bundle.js
[ tamaño: ~ 1 MB (lo más pequeño posible)]
bundles/app.bundle.js
[ tamaño: depende de su proyecto , el mío es ~ 0.5 MB ]
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);
});
});
{
"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"
}
}
(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);
var map = {
'app': 'dist/app',
};
dist-systemjs.config.js
etiqueta después de las etiquetas del paquete aún permitiría que el programa se ejecute, pero el paquete de dependencia se ignorará y las dependencias se cargarán desde la node_modules
carpeta.<!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>
Lo mejor que pude hacer todavía :)
inline-templates
se ejecuta, alinea las plantillas y luego crea una copia de todas las carpetas y archivos de la aplicación en dist/app
. Luego, en dist-systemjs.config.js
asignar app
a dist/app
que es una carpeta que no existirá si se utiliza la dist
carpeta como root. ¿No le gustaría ejecutar su aplicación desde la dist
carpeta? Y si ese es el caso, no tendría una dist
carpeta anidada en la dist
carpeta raíz . Debo estar perdiendo algo más aquí. ¿No necesita decirle a systemjs que use sus archivos agrupados y no los archivos habituales que se encuentran en la dist/app
carpeta?
El equipo de Angular2 publicó un tutorial para usar Webpack
Creé y coloqué los archivos del tutorial en un pequeño proyecto semilla de GitHub . Para que pueda probar rápidamente el flujo de trabajo.
Instrucciones :
npm install
npm start . Para desarrollo. Esto creará una carpeta virtual "dist" que se volverá a cargar en vivo en su dirección de host local.
npm ejecutar compilación . Para la producción. "Esto creará una versión física de la carpeta" dist "que se puede enviar a un servidor web. La carpeta dist es de 7.8MB pero solo se requieren 234KB para cargar la página en un navegador web.
Este paquete de inicio Webpack ofrece algunas características de prueba más que el tutorial anterior y parece bastante popular.
Angular.io tiene un tutorial de inicio rápido. Copié este tutorial y lo extendí con algunas tareas simples para agrupar todo en la carpeta dist que se puede copiar al servidor y funcionar así. Intenté optimizar todo para que funcione bien en Jenkis CI, por lo que node_modules se puede almacenar en caché y no es necesario copiar.
Código fuente con aplicación de muestra en Github: https://github.com/Anjmao/angular2-production-workflow
Pasos para la produccionNodo : aunque siempre puede crear su propio proceso de compilación, pero le recomiendo utilizar angular-cli, porque tiene todos los flujos de trabajo necesarios y ahora funciona perfectamente. Ya lo estamos usando en producción y no tenemos ningún problema con angular-cli.
Esto apoya:
ng nuevo nombre-proyecto - enrutamiento
Puedes añadir --style=scss
soporte para SASS .scss.
Puedes añadir --ng4
para usar Angular 4 en lugar de Angular 2.
Después de crear el proyecto, la CLI se ejecutará automáticamente npm install
por usted. Si desea utilizar Yarn en su lugar, o simplemente quiere ver el esqueleto del proyecto sin instalar, consulte aquí cómo hacerlo .
Dentro de la carpeta del proyecto:
ng build -prod
En la versión actual, debe especificarlo --aot
manualmente, ya que puede usarse en modo de desarrollo (aunque eso no es práctico debido a la lentitud).
Esto también realiza la compilación de AoT para paquetes aún más pequeños (sin compilador angular, en cambio, genera la salida del compilador). Los paquetes son mucho más pequeños con AoT si usa Angular 4 ya que el código generado es más pequeño.
Puede probar su aplicación con AoT en modo de desarrollo (mapas de origen, sin minificación) y AoT ejecutandong build --aot
.
El directorio de salida predeterminado es ./dist
, aunque se puede cambiar en./angular-cli.json
.
El resultado del paso de compilación es el siguiente:
(Nota: se <content-hash>
refiere al hash / huella digital del contenido del archivo que pretende ser una forma de reventar la caché, esto es posible ya que Webpack escribe las script
etiquetas por sí mismo)
./dist/assets
./src/assets/**
./dist/index.html
./src/index.html
, después de agregarle scripts webpack, el ./angular-cli.json
./dist/inline.js
./dist/main.<content-hash>.bundle.js
./dist/styles.<content-hash>.bundle.js
En versiones anteriores también creaba versiones comprimidas para verificar su tamaño, y .map
archivos de mapas de origen, pero esto ya no sucede ya que la gente seguía pidiendo eliminarlos.
En otras ocasiones, puede encontrar otros archivos / carpetas no deseados:
./out-tsc/
./src/tsconfig.json
'soutDir
./out-tsc-e2e/
./e2e/tsconfig.json
'soutDir
./dist/ngfactory/
<content-hash>
de los paquetes en prod. Puede causar problemas para obtener el último paquete?
A día de hoy todavía encuentro el libro de cocina de compilación anticipada como la mejor receta para la producción en paquete. Puede encontrarlo aquí: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
Mi experiencia con Angular 2 hasta ahora es que AoT crea las compilaciones más pequeñas casi sin tiempo de carga. Y lo más importante, ya que la pregunta aquí es: 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 se compilan "por adelantado". También es genial ver el marcado de su plantilla HTML transformado en instrucciones de JavaScript que serían muy difíciles de aplicar ingeniería inversa en el HTML original.
Hice un video simple donde demuestro el tamaño de descarga, la cantidad de archivos, etc. para una aplicación Angular 2 en desarrollo vs AoT build, que puede ver aquí:
Encontrará el código fuente utilizado en el video aquí:
**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="https://stackoverflow.com/">
</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.
Puede implementar su aplicación angular al github
usar
angular-cli-ghpages
mira el enlace para encontrar cómo implementar usando este cli.
el sitio web desplegado se almacenará en alguna sucursal en github
general
gh-pages
use puede clonar la rama git y usarla como sitio web estático en su servidor
"Mejor" depende del escenario. Hay momentos en los que solo te importa el paquete individual más pequeño posible, pero en aplicaciones grandes es posible que tengas que considerar la carga diferida. En algún momento, resulta poco práctico servir toda la aplicación como un solo paquete.
En este último caso, Webpack es generalmente la mejor manera, ya que admite la división de código.
Para un solo paquete, consideraría Rollup o el compilador de Closure si te sientes valiente :-)
He creado muestras de todos los paquetes angulares que he usado aquí: http://www.syntaxsuccess.com/viewarticle/angular-production-builds
El código se puede encontrar aquí: https://github.com/thelgevold/angular-2-samples
Versión angular: 4.1.x
Simplemente configure angular 4 con webpack 3 en un minuto, su paquete ENV de desarrollo y producción estará listo sin ningún problema, solo siga el siguiente documento de github
Intente debajo del comando CLI en el directorio actual del proyecto. Creará un paquete de carpetas dist. para que pueda cargar todos los archivos dentro de la carpeta dist para implementaciones.
ng build --prod --aot --base-href.
ng serve funciona para servir nuestra aplicación con fines de desarrollo. ¿Qué pasa con la producción? Si miramos nuestro archivo package.json, podemos ver que hay scripts que podemos usar:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
El script de compilación utiliza la compilación ng de la CLI angular con el indicador --prod. Probemos eso ahora. Podemos hacerlo de dos maneras:
# usando los scripts npm
npm run build
# usando el cli directamente
ng build --prod
Esta vez nos dan cuatro archivos en lugar de los cinco. El indicador --prod le dice a Angular que reduzca el tamaño de nuestra aplicación.