Apa metode terbaik untuk bundel Angular (versi 2, 4, 6, ...) untuk produksi di server web langsung.

Harap sertakan versi Angular dalam jawaban sehingga kami dapat melacak dengan lebih baik saat berpindah ke rilis selanjutnya.

2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x (TypeScript) dengan CLI Angular

Pengaturan OneTime

• npm install -g @angular/cli
• ng new projectFolder membuat aplikasi baru

Langkah Bundling

• ng build --prod(jalankan di baris perintah ketika direktori projectFolder)

  prodbundel bendera untuk produksi (lihat dokumentasi Sudut untuk daftar opsi yang disertakan dengan bendera produksi).

• Kompres menggunakan kompresi Brotli sumber daya menggunakan perintah berikut

  for i in dist/*; do brotli $i; done

bundel dihasilkan secara default ke projectFolder / dist (/ $ projectFolder for 6)

Keluaran

Ukuran dengan Angular 9.0.0dengan CLI 9.0.1dan opsi CSS tanpa routing Angular

• dist/main-[es-version].[hash].jsAplikasi Anda dibundel [Ukuran ES5: 158 KB untuk aplikasi Angular CLI baru kosong, terkompresi 40 KB ].
• dist/polyfill-[es-version].[hash].bundle.jsdependensi polyfill (@angular, RxJS ...) dibundel [ukuran ES5: 127 KB untuk aplikasi Angular CLI baru kosong, terkompresi 37 KB ].
• dist/index.html titik masuk aplikasi Anda.
• dist/runtime-[es-version].[hash].bundle.js loader webpack
• dist/style.[hash].bundle.css definisi gaya
• dist/assets sumber daya disalin dari konfigurasi aset CLI Angular

Penyebaran

Anda bisa mendapatkan pratinjau aplikasi Anda menggunakan ng serve --prodperintah yang memulai server HTTP lokal sehingga aplikasi dengan file produksi dapat diakses menggunakan http: // localhost: 4200 .

Untuk penggunaan produksi, Anda harus menggunakan semua file dari distfolder di server HTTP pilihan Anda.

2.0.1 Final menggunakan Gulp (TypeScript - Target: ES5)

Pengaturan OneTime

• npm install (berjalan dalam cmd ketika direktori projectFolder)

Langkah Bundling

• npm run bundle (berjalan dalam cmd ketika direktori projectFolder)

  bundel dihasilkan ke projectFolder / bundles /

Keluaran

• bundles/dependencies.bundle.js[ ukuran: ~ 1 MB (sekecil mungkin)]
  • mengandung rxjs dan dependensi sudut, bukan keseluruhan kerangka kerja
• bundles/app.bundle.js[ ukuran: tergantung proyek Anda , milik saya ~ 0,5 MB ]
  • berisi proyek Anda

Struktur File

• projectFolder / app / (semua komponen, arahan, template, dll)
• 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 (sama dengan panduan Quickstart , baru saja memperlihatkan devDependencies dan npm-script yang diperlukan untuk bundel)

{
  "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 (sama dengan panduan Quickstart , tidak tersedia lagi di sana)

(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 (baru saja menunjukkan perbedaannya dengan systemjs.config.json)

var map = {
    'app':                        'dist/app',
  };

• projectFolder / index.html (produksi) - Urutan tag skrip sangat penting. Menempatkan dist-systemjs.config.jstag setelah tag bundel masih akan memungkinkan program untuk berjalan tetapi bundel dependensi akan diabaikan dan dependensi akan dimuat dari node_modulesfolder.

<!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>

• projectFolder / app / boot.ts adalah tempat bootstrap berada.

Yang terbaik yang bisa saya lakukan :)

Angular 2 dengan Webpack (tanpa pengaturan CLI)

1- Tutorial oleh tim Angular2

Tim Angular2 menerbitkan tutorial untuk menggunakan Webpack

Saya membuat dan menempatkan file dari tutorial di proyek seed kecil GitHub . Jadi, Anda dapat dengan cepat mencoba alur kerja.

Instruksi :

• npm instal

• mulai npm . Untuk pengembangan. Ini akan membuat folder "dist" virtual yang akan dimuat di alamat localhost Anda.

• npm run build . Untuk produksi. "Ini akan membuat versi folder" dist "fisik daripada yang dapat dikirim ke server web. Folder dist adalah 7.8MB tetapi hanya 234KB yang benar-benar diperlukan untuk memuat halaman di browser web.
  
  

2 - Kit starter Webkit

Kit Starter Webpack ini menawarkan beberapa fitur pengujian lebih banyak daripada tutorial di atas dan tampaknya cukup populer.

Alur kerja produksi 2 sudut dengan pembangun SystemJs dan tegukan

Angular.io memiliki tutorial memulai cepat. Saya menyalin tutorial ini dan diperpanjang dengan beberapa tugas tegukan sederhana untuk bundling semuanya ke folder dist yang dapat disalin ke server dan bekerja begitu saja. Saya mencoba untuk mengoptimalkan semuanya agar berfungsi dengan baik pada Jenkis CI, sehingga node_modules dapat di-cache dan tidak perlu disalin.

Kode sumber dengan aplikasi sampel di Github: https://github.com/Anjmao/angular2-production-workflow

1. Bersihkan skrip dikompilasi file js dan folder dist
2. Kompilasi file naskah dalam folder aplikasi
3. Gunakan bundel SystemJs untuk menggabungkan segala sesuatu ke folder dengan hash yang dihasilkan untuk menyegarkan cache browser
4. Gunakan gulp-html-replace untuk mengganti skrip index.html dengan versi yang dibundel dan salin ke folder dist
5. Salin semua yang ada di dalam folder aset ke folder dist

Node : Meskipun Anda selalu dapat membuat proses build Anda sendiri, tetapi saya sangat merekomendasikan untuk menggunakan angular-cli, karena ia memiliki semua alur kerja yang dibutuhkan dan berfungsi dengan baik sekarang. Kami sudah menggunakannya dalam produksi dan tidak memiliki masalah dengan angular-cli sama sekali.

CLI Sudut 1.xx (Bekerja dengan Sudut 4.xx, 5.xx)

Ini mendukung:

• 2.x sudut dan 4.x
• Webpack terbaru 2.x
• Kompiler AoT sudut
• Routing (normal dan malas)
• SCSS
• Bundling file khusus (aset)
• Alat pengembangan tambahan (linter, unit & pengaturan pengujian ujung-ke-ujung)

Pengaturan awal

ng nama proyek baru --routing

Anda dapat menambahkan --style=scssdukungan SASS .scss.

Anda dapat menambahkan --ng4untuk menggunakan Angular 4, bukan Angular 2.

Setelah membuat proyek, CLI akan secara otomatis berjalan npm installuntuk Anda. Jika Anda ingin menggunakan Benang sebagai gantinya, atau hanya ingin melihat kerangka proyek tanpa menginstal, periksa bagaimana melakukannya di sini .

Bundel Langkah

Di dalam folder proyek:

ng build -prod

Pada versi saat ini Anda harus menentukan --aot secara manual, karena dapat digunakan dalam mode pengembangan (meskipun itu tidak praktis karena kelambatan).

Ini juga melakukan kompilasi AoT untuk bundel yang lebih kecil (tidak ada kompiler Angular, sebagai gantinya, dihasilkan output kompiler) Bundel jauh lebih kecil dengan AoT jika Anda menggunakan Angular 4 karena kode yang dihasilkan lebih kecil.
Anda dapat menguji aplikasi Anda dengan AoT dalam mode pengembangan (sourcemaps, tanpa minification) dan AoT dengan menjalankanng build --aot .

Keluaran

Dir keluaran default adalah ./dist, meskipun dapat diubah dalam ./angular-cli.json.

File yang Dapat Digunakan

Hasil langkah pembangunan adalah sebagai berikut:

(Catatan: <content-hash>mengacu pada hash / sidik jari dari isi file yang dimaksudkan sebagai penghilang cache, ini dimungkinkan karena Webpack menulis scripttag dengan sendirinya)

• ./dist/assets
  File disalin dari apa adanya ./src/assets/**
• ./dist/index.html
  Dari ./src/index.html, setelah menambahkan skrip webpack ke dalamnya
  File templat sumber dapat dikonfigurasi di./angular-cli.json
• ./dist/inline.js
  Loader webpack kecil / polyfill
• ./dist/main.<content-hash>.bundle.js
  File .js utama yang berisi semua skrip .js dibuat / diimpor
• ./dist/styles.<content-hash>.bundle.js
  Saat Anda menggunakan Webpack loader untuk CSS, yang merupakan cara CLI, mereka dimuat melalui JS di sini

Pada versi yang lebih lama, ini juga membuat versi gzip untuk memeriksa ukurannya, dan .mapmem - sourcemaps file, tetapi ini tidak lagi terjadi karena orang terus meminta untuk menghapusnya.

File Lainnya

Pada kesempatan lain, Anda mungkin menemukan file / folder lain yang tidak diinginkan:

• ./out-tsc/
  Dari ./src/tsconfig.json'soutDir
• ./out-tsc-e2e/
  Dari ./e2e/tsconfig.json'soutDir
• ./dist/ngfactory/
  Dari kompiler AoT (tidak dapat dikonfigurasi tanpa forking CLI pada beta 16)

Sampai hari ini saya masih menemukan buku masak Kompilasi Ahead-of-Time sebagai resep terbaik untuk bundling produksi. Anda dapat menemukannya di sini: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Pengalaman saya dengan Angular 2 sejauh ini adalah bahwa AoT menciptakan build terkecil dengan hampir tanpa waktu pemuatan. Dan yang paling penting karena pertanyaan di sini adalah tentang - Anda hanya perlu mengirimkan beberapa file ke produksi.

Ini sepertinya karena kompiler Angular tidak akan dikirimkan dengan build produksi karena templat dikompilasi "Ahead of Time". Ini juga sangat keren untuk melihat markup template HTML Anda ditransformasikan menjadi instruksi javascript yang akan sangat sulit untuk merekayasa balik menjadi HTML asli.

Saya telah membuat video sederhana di mana saya mendemonstrasikan ukuran unduhan, jumlah file, dll. Untuk aplikasi Angular 2 di dev vs AoT build - yang dapat Anda lihat di sini:

https://youtu.be/ZoZDCgQwnmQ

Anda akan menemukan kode sumber yang digunakan dalam video di sini:

https://github.com/fintechneo/angular2-templates

        **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.

Anda dapat menggunakan aplikasi sudut Anda untuk githubmenggunakan angular-cli-ghpages

lihat tautan untuk menemukan cara menyebarkan menggunakan klien ini.

situs web yang dikerahkan akan disimpan di beberapa cabang di github biasanya

halaman gh

gunakan dapat mengkloning cabang git dan menggunakannya seperti situs web statis di server Anda

"Terbaik" tergantung pada skenario. Ada kalanya Anda hanya peduli pada bundel terkecil yang mungkin, tetapi dalam aplikasi besar Anda mungkin harus mempertimbangkan pemuatan yang malas. Pada titik tertentu menjadi tidak praktis untuk melayani seluruh aplikasi sebagai satu bundel.

Dalam kasus terakhir, Webpack umumnya merupakan cara terbaik karena mendukung pemisahan kode.

Untuk satu bundel saya akan mempertimbangkan Rollup, atau kompiler Penutupan jika Anda merasa berani :-)

Saya telah membuat sampel dari semua bundler Angular yang pernah saya gunakan di sini: http://www.syntaxsuccess.com/viewarticle/angular-production-builds

Kode dapat ditemukan di sini: https://github.com/thelgevold/angular-2-samples

Versi sudut: 4.1.x

Cukup siapkan angular 4 dengan webpack 3 dalam satu menit, pengembangan dan produksi bundel ENV Anda akan siap tanpa masalah, cukup ikuti github doc di bawah ini

https://github.com/roshan3133/angular2-webpack-starter

Silakan coba di bawah perintah CLI di direktori proyek saat ini. Ini akan membuat bundel folder dist. sehingga Anda dapat mengunggah semua file dalam folder dist untuk penyebaran.

ng build --prod --aot --base-href.

ng melayani pekerjaan untuk melayani aplikasi kita untuk tujuan pengembangan. Bagaimana dengan produksi? Jika kita melihat file package.json kita, kita dapat melihat bahwa ada skrip yang bisa kita gunakan:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

Skrip build menggunakan Angular CLI's build dengan flag --prod. Mari kita coba sekarang. Kita dapat melakukannya dengan satu dari dua cara:

# menggunakan skrip npm

npm run build

# Menggunakan cli secara langsung

ng build --prod

Kali ini kami diberikan empat file, bukan lima. Bendera --prod memberitahu Angular untuk membuat aplikasi kita lebih kecil ukurannya.