Canlı bir web sunucusunda üretim için Angular'ı (sürüm 2, 4, 6, ...) paketlemenin en iyi yöntemi nedir?
Açısal sürümü yanıtlara ekleyin, böylece daha sonraki sürümlere taşındığında daha iyi takip edebiliriz.
Canlı bir web sunucusunda üretim için Angular'ı (sürüm 2, 4, 6, ...) paketlemenin en iyi yöntemi nedir?
Açısal sürümü yanıtlara ekleyin, böylece daha sonraki sürümlere taşındığında daha iyi takip edebiliriz.
Yanıtlar:
2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x
(TypeScript) ile Açısal CLInpm install -g @angular/cli
ng new projectFolder
yeni bir uygulama oluştururng build --prod
(dizin olduğunda komut satırında çalıştırın projectFolder
)
prod
üretim için bayrak demeti ( üretim bayrağına dahil olan seçeneklerin listesi için Açısal belgelere bakın ).
Aşağıdaki komutu kullanarak kaynakları Brotli kullanarak sıkıştırın
for i in dist/*; do brotli $i; done
demetleri varsayılan olarak projectFolder / dist (/ $ projectFolder for 6) olarak oluşturulur
9.0.0
CLI ile Açısal 9.0.1
ve Açısal yönlendirme olmadan CSS seçeneği olan boyutlar
dist/main-[es-version].[hash].js
Uygulamanız paketlendi [ES5 boyutu: yeni Açısal CLI uygulaması için 158 KB boş, 40 KB sıkıştırılmış].dist/polyfill-[es-version].[hash].bundle.js
çoklu dolgu bağımlılıkları (@angular, RxJS ...) [ES5 boyutu: yeni Açısal CLI uygulaması için 127 KB boş, 37 KB sıkıştırılmış].dist/index.html
uygulamanızın giriş noktası.dist/runtime-[es-version].[hash].bundle.js
webpack yükleyicidist/style.[hash].bundle.css
stil tanımlarıdist/assets
CLI varlık yapılandırmasından kopyalanan kaynaklarng serve --prod
Üretim dosyalarına sahip uygulamaya http: // localhost: 4200 kullanılarak erişilebilecek şekilde yerel bir HTTP sunucusu başlatan komutu kullanarak uygulamanızın önizlemesini alabilirsiniz .
Üretim kullanımı için, seçtiğiniz dist
HTTP sunucusundaki klasördeki tüm dosyaları dağıtmanız gerekir.
2.0.1 Final
Gulp kullanma (TypeScript - Hedef: ES5)npm install
(direcory projectFolder olduğunda cmd cinsinden çalıştırın)npm run bundle
(direcory projectFolder olduğunda cmd cinsinden çalıştırın)
demetleri projectFolder / bundles /
bundles/dependencies.bundle.js
[ boyut: ~ 1 MB (mümkün olduğunca küçük)]
bundles/app.bundle.js
[ boyut: projenize bağlıdır , benim ~ 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
Etiketi paket etiketlerinden sonra yerleştirmek yine de programın çalışmasına izin verir, ancak bağımlılık paketi yok sayılır ve bağımlılıklar node_modules
klasörden yüklenir .<!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>
Yapabileceğim en iyi şey :)
inline-templates
çalıştırılır daha sonra şablonları inlines tüm uygulama klasör ve dosyaların bir kopyasını oluşturur dist/app
. Sonra içinde dist-systemjs.config.js
Haritaya app
için dist/app
hangi kullanırsanız var olmayacak bir klasör dist
root olarak klasörü. Uygulamanızı dist
klasörden çalıştırmak istemez misiniz ? Ve bu durumda, dist
kök dist
klasörde iç içe bir klasörünüz olmazdı . Burada başka bir şey eksik olmalı. Systemjs'e, dist/app
klasörde bulunan olağan dosyaları değil, paketlenmiş dosyalarınızı kullanmasını söylemenize gerek yok mu?
Angular2 ekibi Webpack'i kullanmak için bir eğitim yayınladı
Öğreticideki dosyaları oluşturup küçük bir GitHub tohum projesine yerleştirdim . Böylece iş akışını hızlı bir şekilde deneyebilirsiniz.
Talimatlar :
npm kurulumu
npm başlangıç . Geliştirme için. Bu, yerel ana bilgisayar adresinize karaciğer yükleyecek sanal bir "dağıtım" klasörü oluşturur.
npm çalışma derlemesi . Prodüksiyon için. "Bu, bir web sunucusuna gönderilenden daha fiziksel bir" dist "klasör sürümü oluşturur. Dist klasörü 7.8 MB'dir, ancak sayfayı bir web tarayıcısına yüklemek için yalnızca 234 KB gereklidir.
Bu Webpack Başlangıç Kiti , yukarıdaki öğreticiden daha fazla test özelliği sunuyor ve oldukça popüler görünüyor.
Angular.io hızlı başlangıç öğreticisine sahiptir. Bu öğreticiyi kopyaladım ve her şeyi sunucuya kopyalanabilecek ve bu şekilde çalışacak dist klasörüne paketlemek için bazı basit yudum görevleriyle genişlettim. Jenkis CI üzerinde iyi çalışmak için her şeyi optimize etmeye çalıştım, bu yüzden node_modules önbelleğe alınabilir ve kopyalanmasına gerek yoktur.
Github'da örnek uygulama içeren kaynak kodu: https://github.com/Anjmao/angular2-production-workflow
Üretim adımlarıDüğüm : Her zaman kendi oluşturma sürecinizi oluşturabilseniz de, açısal cli kullanmanızı şiddetle tavsiye ederim, çünkü gerekli tüm iş akışlarına sahip ve şimdi mükemmel çalışıyor. Zaten üretimde kullanıyoruz ve açısal cli ile ilgili herhangi bir sorunumuz yok.
Bu şunları destekler:
yeni proje adı - yönlendirme
--style=scss
SASS .scss desteği için ekleyebilirsiniz .
--ng4
Açısal 2 yerine Açısal 4'ü kullanmak için ekleyebilirsiniz .
Projeyi oluşturduktan sonra, CLI npm install
sizin için otomatik olarak çalışacaktır . Bunun yerine İplik kullanmak veya sadece proje iskeletine kurulum yapmadan bakmak istiyorsanız, nasıl yapılacağını buradan kontrol edin .
Proje klasörünün içinde:
ng inşa-prod
Mevcut sürümde --aot
manuel olarak belirtmeniz gerekir, çünkü geliştirme modunda kullanılabilir (yavaşlık nedeniyle pratik olmasa da).
Bu aynı zamanda daha küçük paketler için bile AoT derlemesi gerçekleştirir (bunun yerine üretilen derleyici çıkışı yok). Oluşturulan kod daha küçük olduğundan Açısal 4'ü kullanırsanız, paketler AoT ile çok daha küçüktür.
Uygulamanızı geliştirme modunda AoT (kaynak haritaları, küçültme yok) ve AoT ile çalıştırarak test edebilirsiniz ng build --aot
.
Varsayılan çıkış dizini ./dist
değiştirilebilir, ancak değiştirilebilir ./angular-cli.json
.
Derleme adımının sonucu şudur:
(Not: <content-hash>
önbellek bozma yolu olması gereken dosyanın içeriğinin karma / parmak izini ifade eder, Webpack script
etiketleri kendi başına yazdığından bu mümkündür )
./dist/assets
./src/assets/**
./dist/index.html
./src/index.html
, web paketi komut dosyaları ekledikten sonra ./angular-cli.json
./dist/inline.js
./dist/main.<content-hash>.bundle.js
./dist/styles.<content-hash>.bundle.js
Daha eski sürümlerde, boyutlarını ve .map
kaynak harita dosyalarını kontrol etmek için gzip edilmiş sürümler de oluşturdu , ancak insanlar bunları kaldırmayı istediği için bu artık gerçekleşmiyor.
Diğer bazı durumlarda, istenmeyen diğer dosyaları / klasörleri bulabilirsiniz:
./out-tsc/
./src/tsconfig.json
'soutDir
./out-tsc-e2e/
./e2e/tsconfig.json
'soutDir
./dist/ngfactory/
<content-hash>
içinde demetlerden çıkarırsam ne olur . en son paketi almakta sorunlara neden olabilir?
Bugün itibariyle, Zamanın Önde Derleme yemek kitabını hala üretim paketlemesi için en iyi tarif olarak görüyorum. Burada bulabilirsiniz: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
Şu ana kadar Angular 2 ile yaşadığım deneyim, AoT'nin neredeyse hiç yükleme süresi olmadan en küçük yapıları oluşturması. Ve buradaki soru en önemlisi - üretime sadece birkaç dosya göndermeniz gerekiyor.
Bunun nedeni, şablonların "Zamanın Ötesinde" derlenmesi nedeniyle Açısal derleyicinin üretim yapılarıyla gönderilmemesi gerektiği gibi görünmektedir. HTML şablon işaretlemenizin, orijinal HTML'ye tersine çevirmek çok zor olan javascript talimatlarına dönüştürüldüğünü görmek de çok güzel.
AoT derlemesinde bir Angular 2 uygulaması için indirme boyutunu, dosya sayısını vb.
Videoda kullanılan kaynak kodunu burada bulabilirsiniz:
**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.
Açısal uygulamanızı, açısal-cli-ghpagesgithub
kullanarak
dağıtabilirsiniz
bu klibi kullanarak nasıl dağıtılacağını bulmak için bağlantıya göz atın.
konuşlandırılan web sitesi, github
genellikle
gh-sayfaları
kullanın git dalını klonlayabilir ve sunucunuzdaki statik web sitesi gibi kullanabilirsiniz
"En iyi" senaryoya bağlıdır. Sadece mümkün olan en küçük tek paketi önemsediğiniz zamanlar vardır, ancak büyük uygulamalarda tembel yüklemeyi düşünmeniz gerekebilir. Bir noktada, tüm uygulamayı tek bir paket olarak sunmak pratik olmaz.
İkinci durumda, Webpack genellikle kod bölmeyi desteklediğinden en iyi yoldur.
Tek bir paket için cesur hissediyorsanız Rollup veya Closure derleyicisini düşünürdüm :-)
Burada kullandığım tüm Açısal paketleyicilerin örneklerini oluşturdum: http://www.syntaxsuccess.com/viewarticle/angular-production-builds
Kod şu adreste bulunabilir: https://github.com/thelgevold/angular-2-samples
Açısal sürüm: 4.1.x
Geliştirme ve üretim ENV paketiniz bir dakika içinde webpack 3 ile açısal 4'ü kurmanız yeterlidir.
Lütfen geçerli proje dizinindeki CLI komutunu deneyin. Dağıtım klasörü paketi oluşturur. dağıtımlar için dağıtım klasöründeki tüm dosyaları yükleyebilirsiniz.
ng - prod --aot --base-href.
ng hizmet uygulama geliştirme amaçlı hizmet için çalışır. Üretim ne olacak? Package.json dosyamıza bakarsak, kullanabileceğimiz komut dosyaları olduğunu görebiliriz:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Derleme betiği --prod bayrağıyla Açısal CLI'nin ng derlemesini kullanır. Şimdi deneyelim. Bunu iki yoldan biriyle yapabiliriz:
# npm komut dosyalarını kullanma
npm run build
# doğrudan klibi kullanma
ng build --prod
Bu sefer beş yerine dört dosya veriliyor. --Prod bayrağı, Angular'a uygulamamızı daha küçük hale getirmesini söyler.