Bagaimana untuk bundel Sudut aplikasi untuk produksi

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.

Community
Pertanyaan edit 1 Agustus 2019 в 3:13
Pemrograman
angular webpack angular-cli systemjs
4 Juni 2016 в 1:59
5 tayangan
Mengomentari pertanyaan (8)
Larutan

2.x, 4.x, 5.x, 6.x, 7.x, 8.x (Ketangkasan) dengan Sudut CLI

Mantan Setup

  • npm install-g @sudut/cli
  • ng baru projectFolder menciptakan aplikasi baru

Bundling Langkah

  • ng membangun --prod (jalankan di command line ketika direktori projectFolder)

bendera prod bundel untuk produksi (lihat Sudut dokumentasi untuk daftar pilihan termasuk dengan produksi bendera).

  • Kompres dengan menggunakan Brotli kompresi sumber daya menggunakan perintah berikut

bagi saya di dist/*; melakukan brotli $i; dilakukan

bundel yang dihasilkan oleh default untuk projectFolder/dist(/$projectFolder 6)

Output

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 loader
  • dist/gaya.[hash].bundel.css style
  • `dist/aset sumber daya disalin dari Sudut CLI konfigurasi aset

Penyebaran

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

Nicolas Henneaux
Jawaban edit 23 Oktober 2019 в 6:24
Komentar (38)

2.0.1 Final menggunakan Gulp (Naskah - Target: ES5)

Mantan Setup

  • npm install (run di cmd ketika direcory adalah projectFolder)

Bundling Langkah-Langkah

  • npm menjalankan bundel (run di cmd ketika direcory adalah projectFolder)

bundel yang dihasilkan untuk projectFolder / kumpulan /

Output

  • bundles/dependencies.bundle.js [ ukuran: ~ 1 MB (sekecil mungkin) ]
  • mengandung rxjs dan sudut ketergantungan, tidak seluruh kerangka
  • bundles/app.bundle.js [ size: tergantung pada proyek anda, saya adalah ~ 0.5 MB ]
  • mengandung 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 / paket.json (sama seperti Quickstart guide, hanya ditampilkan devDependencies dan npm-script yang dibutuhkan 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 seperti Quickstart guide, tidak ada lagi)


(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 (hanya menunjukkan perbedaan dengan systemjs.config.json)


var map = {
    'app':                        'dist/app',
  };
  • projectFolder / index.html (produksi) - urutan tag script adalah penting. Menempatkan 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.





  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>

  Angular





  loading...



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

<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>
  • projectFolder / aplikasi / boot.ts adalah di mana bootstrap.

Yang terbaik yang bisa saya lakukan belum :)

Igor
Jawaban edit 12 Juli 2017 в 12:30
Komentar (14)

Sudut 2 dengan Webpack (tanpa pengaturan CLI)

1 - tutorial oleh Angular2 tim

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.

    2 - Webkit starter kit

Ini Webpack Starter Kit menawarkan beberapa pengujian fitur dari tutorial di atas dan tampaknya cukup populer.

Pat M
Jawaban edit 3 Februari 2017 в 3:49
Komentar (3)

Sudut 2 alur kerja produksi dengan SystemJs pembangun dan gulp

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

Langkah-langkah untuk produksi

  1. Bersih typescripts disusun js file dan folder dist
  2. Menyusun naskah file di dalam folder aplikasi
  3. Gunakan SystemJs bundler untuk bundel semuanya ke folder dist dengan hash yang dihasilkan untuk cache browser refresh
  4. Menggunakan gulp-html-ganti untuk mengganti index.html script dibundel dengan versi dan copy ke folder dist
  5. Copy semua yang ada di dalam aset folder ke folder dist

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.

Komentar (1)

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

Ini mendukung:

  • Sudut 2.x dan 4.x
  • Terbaru Webpack 2.x
  • Sudut AoT compiler
  • Routing (normal dan malas)
  • SCSS
  • Custom file bundling (aset)
  • Tambahan alat-alat pengembangan (linter, unit & end-to-end test setup)

Pengaturan Awal

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.

Langkah-Langkah Bundle

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

Output default dir ./dist, meskipun hal ini dapat berubah dalam ./sudut-cli.json.

Deployable File

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 sini

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

File Lainnya

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)
Meligy
Jawaban edit 19 Oktober 2017 в 11:31
Komentar (6)

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:

https://youtu.be/ZoZDCgQwnmQ

Anda'll menemukan source code yang digunakan dalam video berikut ini:

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

Komentar (0)
 
        **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 



        Hello

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8" />


       <script type="text/javascript" src="app/shims.js"></script>  



    Loading...
     <script type="text/javascript" src="app/app_libs_bundle.js"></script> 




 6) Now just copy your dist folder to '/www' in wamp server node need to copy node_modules in www.
Tushar Tibude
Jawaban edit 14 Januari 2017 в 9:52
Komentar (0)

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

Komentar (0)

"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

Komentar (0)

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.

Komentar (0)

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

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

Nicolas Henneaux
Jawaban edit 17 November 2017 в 5:58
Komentar (0)