Üretim için Açısal bir uygulama nasıl paketlenir


354

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.




rc3 artık istek sayısını 300'den 40'a düşüren paketlenmiş dosya sürümleri sunuyor.
Pat M

2
Hey. Ayrıca WebPack'lerden nefret ediyorum ve genel olarak adımlar oluşturuyorum. Sadece basit bir web sitesini bir araya getirmeye çalıştığınız için aşırıya kaçma. Böylece bunu yaptım: github.com/schungx/angular2-bundle
Stephen Chung

Teşekkürler Stephen. Bu satıcılar için basit bir çözüm olacaktır. Bunun resmi olarak teklif edilebileceğini ve güncellenebileceğini umuyoruz. Sanırım projenin dosyaları için Gulp gibi bir şey mi kullanıyorsun?
Pat M

Yanıtlar:


363

2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x (TypeScript) ile Açısal CLI

Tek seferlik kurulum

  • npm install -g @angular/cli
  • ng new projectFolder yeni bir uygulama oluşturur

Paketleme Adımı

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

Çıktı

9.0.0CLI ile Açısal 9.0.1ve Açısal yönlendirme olmadan CSS seçeneği olan boyutlar

  • dist/main-[es-version].[hash].jsUygulamanı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ükleyici
  • dist/style.[hash].bundle.css stil tanımları
  • dist/assets CLI varlık yapılandırmasından kopyalanan kaynaklar

yayılma

ng 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 distHTTP sunucusundaki klasördeki tüm dosyaları dağıtmanız gerekir.


Npm install -g angular-cli @ webpack çalıştırırken hata aldım: npm ERR! Lütfen destek talebinde bulunan şu dosyayı ekleyin: .... \ npm-debug.log. Neler olduğunu biliyor musun?
Chong Wang

2
@chrismarx, html ve stilleri ile tüm bileşenleri içeren tek bir paket üretir.
Nicolas Henneaux

4
Bir uygulama vardı ve bu yöntemi kullanmak istedim, bu yüzden proje klasöründen init ng başlatmak. Geri kalan adımları yaptım ama uygulamalarımı konuşlandırdığımda boş görünüyor. Görünen tek şey "uygulama çalışıyor!" mesaj, orada benim app dosyaları almak için ayarlamanız gereken bir yer var mı?
mautrok

2
ng-init açısal klipten çıkarıldı. github.com/angular/angular-cli/issues/5176
Pat M

2
Sonunda bunu kabul edilen cevap olarak işaretledim. Diğer çözümler de işe yarayabilir ve hatta ekstra esneklik sağlayabilir (CLI'sız Webpack kullanma hakkında bir tane yayınladım). Açısal CLI kullanmak kesinlikle daha az baş ağrısı verenidir. AoT'yi daha kolay kullanabilmem için Angular CLI kullanarak projemi uyarladım.
Pat M

58

2.0.1 Final Gulp kullanma (TypeScript - Hedef: ES5)


Tek seferlik kurulum

  • npm install (direcory projectFolder olduğunda cmd cinsinden çalıştırın)

Paketleme Adımları

  • npm run bundle (direcory projectFolder olduğunda cmd cinsinden çalıştırın)

    demetleri projectFolder / bundles /

Çıktı

  • bundles/dependencies.bundle.js[ boyut: ~ 1 MB (mümkün olduğunca küçük)]
    • tüm çerçeveleri değil, rxjs ve açısal bağımlılıkları içerir
  • bundles/app.bundle.js[ boyut: projenize bağlıdır , benim ~ 0.5 MB ]
    • projeni içerir

Dosya Yapısı

  • projectFolder / app / (tüm bileşenler, yönergeler, şablonlar, vb.)
  • 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 ( Hızlı başlatma kılavuzu ile aynı , az önce gösterilen dev Bağımlılıklar ve npm komut dosyaları gösterilir)

{
  "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);
  • projetcFolder / dist-systemjs.config.js (az önce systemjs.config.json ile farkı gösterdi)

var map = {
    'app':                        'dist/app',
  };
  • projectFolder / index.html (production) - Komut dosyası etiketlerinin sırası önemlidir. dist-systemjs.config.jsEtiketi 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_modulesklasö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>
  • projectFolder / app / boot.ts , önyüklemenin yapıldığı yerdir.

Yapabileceğim en iyi şey :)


2
Merhaba, gulp betiği paketleri oluşturuyor, ancak boot.ts dosyasında ne olması gerektiğinden emin değilim? Artık tüm dosyalar pakette değil mi? Paketi yürütüyor muyuz?
chrismarx

2
Ha, sanırım tekrar denemem gerekiyor. Ben builder.buildStatic geçiş denedim ve bir commonjs veya amd modülü olarak yüklenmemesi hakkında rxjs hatalar var. Önerinizi başka bir deneyeceğim
chrismarx

1
Ayrıca bu kurulumda paketlerin aslında nasıl kullanıldığını da bilmiyorum. Burada @chrismarx ile aynı sorunlarla karşılaşıyor gibi görünüyor. Paketleri oluşturabilirim, ancak daha sonra her şey hala aktarılan ve kopyalanan uygulama klasörümden (dist / app'de bulunur) yükleniyor gibi görünüyor. Ağ panelime bakarsam, app.bundle.js'den gelen her şey yerine, uygulamayla ilgili dosyalarımın aslında oradan (bileşenler vb.) Yüklendiğini görebiliyorum. A_Singh, boot.ts'inizi paylaşabilir misiniz? Görünüşe göre burada bir şey eksik ve bazı açıklamalar isterim.
jbgarr

1
A_Singh, bunun nasıl yardımcı olduğunu görmüyorum. Ne zaman 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.jsHaritaya appiçin dist/apphangi kullanırsanız var olmayacak bir klasör distroot olarak klasörü. Uygulamanızı distklasörden çalıştırmak istemez misiniz ? Ve bu durumda, distkök distklasörde iç içe bir klasörünüz olmazdı . Burada başka bir şey eksik olmalı. Systemjs'e, dist/appklasörde bulunan olağan dosyaları değil, paketlenmiş dosyalarınızı kullanmasını söylemenize gerek yok mu?
jbgarr

1
Çözümünüzle ilgili bir sorunla karşılaşıyorum, önyükleme burada olmayan bir şey ve "app" ile değiştirdiğimde "bir hata" modülü tanımlanmadı ".
LoïcR

22

Webpack ile Açısal 2 (CLI kurulumu olmadan)

1- Angular2 ekibinin eğitimi

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.

2 - Bir Webkit başlangıç ​​kiti

Bu Webpack Başlangıç ​​Kiti , yukarıdaki öğreticiden daha fazla test özelliği sunuyor ve oldukça popüler görünüyor.


merhaba, tohum projesini açısal 2.1.0 ile güncellemek mümkün mü? Öğretici şimdi açısal 2.1.0 kullanıyor. Onu takip ettim ve çalışamadım. Hata http 404'tür - app.component.html bulunamıyor.
heq99

Problemsiz açısal 2.1.0 sürümüne geçtim. app.component.html, app.component.ts'den (templateUrl: './app.component.html') çağrılır. Aynı uygulama klasöründe her iki dosyanız var mı?
Pat M

1
Üretim için gittiğinizde ağaç sallama, Minyatür ve Gzipping boyutu büyük ölçüde azaltabilir. İşte örnekle mükemmel bir okuma, blog.mgechev.com/2016/06/26/…
Hamzeen Hameem

16

SystemJs oluşturucu ve gulp ile açısal 2 üretim iş akışı

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ı
  1. Temiz dizeleri derlenmiş js dosyaları ve dist klasörü
  2. Uygulama klasörü içinde daktilo dosyalarını derleme
  3. Tarayıcı önbelleğini yenilemek için her şeyi farklı klasörlere ayırmak için SystemJs paketleyicisini kullanın
  4. İndex.html komut dosyalarını paketlenmiş sürümlerle değiştirmek için gulp-html-replace komutunu kullanın ve dist klasörüne kopyalayın
  5. Varlıklar klasörü içindeki her şeyi dist klasörüne kopyala

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.


Aradığım şey bu. Github üzerinde örnek uygulama çok yararlıdır. Teşekkürler
Shahriar Hasan Sayeed

14

Açısal CLI 1.xx (Açısal 4.xx, 5.xx ile çalışır)

Bu şunları destekler:

  • Açısal 2.x ve 4.x
  • En son Webpack 2.x
  • Açısal AoT derleyicisi
  • Yönlendirme (normal ve tembel)
  • SCSS
  • Özel dosya gruplama (öğeler)
  • Ek geliştirme araçları (linter, birim ve uçtan uca test kurulumları)

İlk kurulum

yeni proje adı - yönlendirme

--style=scssSASS .scss desteği için ekleyebilirsiniz .

--ng4Açısal 2 yerine Açısal 4'ü kullanmak için ekleyebilirsiniz .

Projeyi oluşturduktan sonra, CLI npm installsizin 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 .

Paket Adımları

Proje klasörünün içinde:

ng inşa-prod

Mevcut sürümde --aotmanuel 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.

Çıktı

Varsayılan çıkış dizini ./distdeğiştirilebilir, ancak değiştirilebilir ./angular-cli.json.

Konuşlandırılabilir Dosyalar

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 scriptetiketleri kendi başına yazdığından bu mümkündür )

  • ./dist/assets
    Olduğu gibi kopyalanan dosyalar ./src/assets/**
  • ./dist/index.html
    Gönderen ./src/index.html, web paketi komut dosyaları ekledikten sonra
    Kaynak şablon dosyası./angular-cli.json
  • ./dist/inline.js
    Küçük webpack yükleyici / çoklu dolgu
  • ./dist/main.<content-hash>.bundle.js
    Oluşturulan / içe aktarılan tüm .js komut dosyalarını içeren ana .js dosyası
  • ./dist/styles.<content-hash>.bundle.js
    CLI yolu olan CSS için Webpack yükleyicileri kullandığınızda, bunlar JS yoluyla buraya yüklenir

Daha eski sürümlerde, boyutlarını ve .mapkaynak 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 dosyalar

Diğer bazı durumlarda, istenmeyen diğer dosyaları / klasörleri bulabilirsiniz:

  • ./out-tsc/
    Gönderen ./src/tsconfig.json'soutDir
  • ./out-tsc-e2e/
    Gönderen ./e2e/tsconfig.json'soutDir
  • ./dist/ngfactory/
    AoT derleyicisinden (beta 16'dan itibaren CLI'yi çatallamadan yapılandırılamaz)

Açısal lib ve bağımlılıklarını uygulamamdan ayırmak mümkün mü?
Dominick Piganell

Ağaç sarsıntısının çalışması için tasarlanmış olan CLI'yi kullanmamak. Bu, uygulamanızda kullanılmayan tüm Açısal EcmaScript modüllerini kaldırmaktır. Hız için dev modunda bunu devre dışı bırakma planı vardır ("DLL" olarak yüklenen kütüphaneleri çağırırlar), ancak sonuçta ayırma planı yoktur. CLI'sız da olsa kendi Webpack öğelerinizi yuvarlıyor olmanız gerekir.
Meligy

Dağıtım klasörünü kullanarak uygulamam nasıl kontrol edilir. Web sunucumda nasıl barındırabilirim?
raj m

Sadece sunucuya kopyalayın. Yine de sunulabilen düz statik web sitesidir. Eğer yönlendirme özelliğini kullanıyorsanız, sunucu yapılandırma bölümü üzerinde check Eğik dağıtım docss için olsa HTML dosyasına tüm aramaları yönlendirmek isteyebilirsiniz angular.io/docs/ts/latest/guide/...
Meligy

@ Prod <content-hash>içinde demetlerden çıkarırsam ne olur . en son paketi almakta sorunlara neden olabilir?
k11k2

5

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.

https://youtu.be/ZoZDCgQwnmQ

Videoda kullanılan kaynak kodunu burada bulabilirsiniz:

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


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

2

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

gh-sayfaları

kullanın git dalını klonlayabilir ve sunucunuzdaki statik web sitesi gibi kullanabilirsiniz


1

"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



0

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.


0

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.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.