Apa metode terbaik untuk bundel Sudut (versi 2, 4, 6, ...) untuk produksi pada web server.
Harap sertakan Sudut versi dalam jawaban sehingga kami dapat melacak baik ketika bergerak untuk rilis berikutnya.
2.x, 4.x, 5.x, 6.x, 7.x, 8.x
(Ketangkasan) dengan Sudut CLInpm install-g @sudut/cli
ng baru projectFolder
menciptakan aplikasi barung membangun --prod
(jalankan di command line ketika direktori projectFolder
)bendera prod
bundel untuk produksi (lihat Sudut dokumentasi untuk daftar pilihan termasuk dengan produksi bendera).
bagi saya di dist/*; melakukan brotli $i; dilakukan
bundel yang dihasilkan oleh default untuk projectFolder/dist(/$projectFolder 6)
Ukuran dengan Sudut 8.2.11
dengan CLI `8.3.13 ' dan pilihan CSS tanpa Sudut routing
dist/utama-[es-versi].[hash].js
aplikasi Anda dibundel [ ES5 ukuran: 188 KB untuk Sudut baru CLI aplikasi kosong, 44 KB dikompresi].dist/polyfill-[es-versi].[hash].bundle.js
the polyfill dependensi (@sudut, RxJS...) dibundel [ ES5 size: 122 KB untuk Sudut baru CLI aplikasi kosong, 36 KB dikompresi].dist/index.html
entry point dari aplikasi anda.dist/runtime-[es-versi].[hash].bundle.js
webpack loaderdist/gaya.[hash].bundel.css
styleAnda bisa mendapatkan preview dari aplikasi anda menggunakan ng melayani --prod
perintah yang dimulai lokal server HTTP seperti yang aplikasi dengan produksi file dapat diakses dengan menggunakan http://localhost:4200.
Untuk penggunaan produksi, anda harus mengerahkan semua file dari dist
folder di HTTP server pilihan anda.
2.0.1 Final
menggunakan Gulp (Naskah - Target: ES5) npm install
(run di cmd ketika direcory adalah projectFolder)npm menjalankan bundel
(run di cmd ketika direcory adalah projectFolder)bundel yang dihasilkan untuk projectFolder / kumpulan /
bundles/dependencies.bundle.js
[ ukuran: ~ 1 MB (sekecil mungkin) ]bundles/app.bundle.js
[ size: tergantung pada proyek anda, saya adalah ~ 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
tag setelah bundel kategori masih akan memungkinkan program untuk menjalankan tapi ketergantungan bundel akan diabaikan dan dependensi akan dimuat dari node_modules
folder.<!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>
Yang terbaik yang bisa saya lakukan belum :)
Yang Angular2 tim yang diterbitkan tutorial untuk menggunakan Webpack
Aku dibuat dan ditempatkan file dari tutorial di GitHub benih proyek. Sehingga anda dapat dengan cepat mencoba alur kerja.
Petunjuk:
npm install
npm mulai. Untuk pembangunan. Ini akan membuat virtual "k" folder yang akan livereloaded di alamat localhost.
npm menjalankan membangun. Untuk produksi. "Ini akan membuat fisik "k" map versi dari dapat dikirim ke webserver. Dist folder adalah 7.8 MB tapi hanya 234KB adalah benar-benar diperlukan untuk memuat halaman di web browser.
Ini Webpack Starter Kit menawarkan beberapa pengujian fitur dari tutorial di atas dan tampaknya cukup populer.
Sudut.io memiliki quick start tutorial. Aku disalin tutorial ini dan diperpanjang dengan beberapa tegukan tugas untuk bundling semuanya ke folder dist yang dapat disalin ke server dan bekerja seperti itu. Saya mencoba untuk mengoptimalkan segala sesuatu untuk bekerja dengan baik pada Jenkis CI, jadi node_modules dapat di-cache dan don't perlu disalin.
Kode sumber dengan contoh aplikasi di Github: https://github.com/Anjmao/angular2-production-workflow
Node: Sementara anda selalu dapat membuat anda sendiri membangun proses, tapi saya sangat merekomendasikan untuk menggunakan sudut-cli, karena itu memiliki semua yang dibutuhkan alur kerja dan bekerja dengan sempurna sekarang. Kita sudah menggunakannya dalam produksi dan don't memiliki masalah dengan sudut-cli di semua.
Ini mendukung:
ng proyek baru-nama-routing
Anda dapat menambahkan --style=scss
untuk MERENDAHKANNYA .scss dukungan.
Anda dapat menambahkan --ng4
untuk menggunakan Sudut 4, bukan dari Sudut 2.
Setelah membuat project, CLI akan secara otomatis menjalankan npm install
untuk anda. Jika anda ingin menggunakan Benang sebaliknya, atau hanya ingin melihat kerangka proyek tanpa install, lihat bagaimana melakukannya di sini.
Di dalam folder proyek:
ng membangun -prod<menyerang>Pada versi saat ini, anda perlu untuk menentukan `--aot` secara manual, karena hal ini dapat digunakan dalam pengembangan mode (meskipun itu's tidak praktis karena kelambatan).</strike>
Ini juga melakukan AoT kompilasi bahkan lebih kecil bundel (tidak ada Sudut compiler, sebaliknya, yang dihasilkan compiler output). Bundel yang jauh lebih kecil dengan AoT jika anda menggunakan Sudut 4 sebagai kode yang dihasilkan lebih kecil.
Anda dapat menguji aplikasi anda dengan AoT dalam pengembangan mode (sourcemaps, tidak ada minification) dan AoT dengan menjalankan ng membangun --aot
.
Output default dir ./dist
, meskipun hal ini dapat berubah dalam ./sudut-cli.json
.
Hasil dari membangun langkah adalah sebagai berikut:
(Catatan: <content-hash>
mengacu pada hash / sidik jari dari isi file yang's dimaksudkan untuk menjadi sebuah cache penghilang jalan, hal ini dimungkinkan karena Webpack menulis script
kategori dengan sendirinya)
./dist/aset
File yang disalin apa adanya dari ./src/aset/**
./dist/index.html
Dari ./src/index.html
, setelah menambahkan webpack script itu
Sumber file template ini dapat dikonfigurasi dalam ./sudut-cli.json
./dist/inline.js
Kecil webpack loader / polyfill./dist/utama.<content-hash>.bundle.js
Utama .js file yang berisi semua .script js yang dihasilkan / impor./dist/gaya.<content-hash>.bundle.js
Ketika anda menggunakan Webpack loader untuk CSS, yang merupakan CLI jalan, mereka dimuat melalui JS di siniDalam versi ini juga dibuat gzip versi untuk memeriksa ukuran mereka, dan .peta
sourcemaps file, tapi ini tidak lagi terjadi karena orang-orang terus bertanya untuk menghapus.
Dalam beberapa kesempatan lain, anda mungkin menemukan tidak diinginkan lainnya file/folder:
./keluar-tsc/
Dari ./src/tsconfig.json
's outDir
./keluar-tsc-e2e/
Dari ./e2e/tsconfig.json
's outDir
./dist/ngfactory/
Dari AoT compiler (tidak dikonfigurasi tanpa forking CLI sebagai beta 16)Saat ini saya masih menemukan Ahead-of-Time Kompilasi masak seperti resep terbaik untuk produksi bundling. Anda dapat menemukannya di sini: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
Pengalaman saya dengan Sudut 2 sejauh ini adalah bahwa AoT menciptakan terkecil membangun dengan hampir tidak ada waktu loading. Dan yang paling penting sebagai pertanyaan di sini tentang - anda hanya perlu mengirimkan beberapa file untuk produksi.
Hal ini tampaknya karena Sudut compiler tidak akan dikirim dengan produksi yang membangun template yang disusun "Sebelumnya". It's juga sangat keren untuk melihat template HTML markup berubah untuk javascript petunjuk bahwa akan sangat sulit untuk membalikkan insinyur yang asli ke HTML.
I've membuat video sederhana di mana saya menunjukkan download ukuran, jumlah file dll. untuk Sudut 2 aplikasi di dev vs AoT membangun - yang dapat anda lihat di sini:
Anda'll menemukan source code yang digunakan dalam video berikut ini:
**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.
Anda dapat menggunakan sudut aplikasi pada github
menggunakan
sudut-cli-ghpages
check out link untuk menemukan cara untuk menyebarkan menggunakan cli.
dikerahkan web akan disimpan dalam beberapa cabang di github
biasanya
gh-halaman
penggunaan clone git branch dan menggunakannya seperti website statis di server anda
"Terbaik" tergantung pada skenario. Ada saat-saat ketika anda hanya peduli tentang hal terkecil yang mungkin bundel tunggal, tetapi dalam aplikasi besar anda mungkin harus mempertimbangkan lazy loading. Di beberapa titik itu menjadi tidak praktis untuk melayani seluruh aplikasi sebagai satu bundel.
Dalam kasus terakhir Webpack umumnya cara terbaik karena mendukung kode membelah.
Untuk satu bundel saya akan mempertimbangkan Rollup, atau Penutupan compiler jika anda merasa berani :-)
Saya telah membuat sampel dari semua Sudut bundlers I've pernah digunakan di sini: http://www.syntaxsuccess.com/viewarticle/angular-production-builds
Kode dapat ditemukan di sini: https://github.com/thelgevold/angular-2-samples
Sudut versi: 4.1.x
Silakan coba berikut ini perintah CLI pada saat ini proyek direktori. Ini akan membuat folder dist bundel. jadi, anda dapat meng-upload semua file-file di dalam folder dist untuk penyebaran.
ng membangun --prod --aot --dasar-href.
Hanya saja pengaturan sudut 4 dengan webpack 3 dalam satu menit anda pengembangan dan produksi ENV bundel akan menjadi siap tanpa masalah cukup ikuti langkah di bawah ini github doc