Angular uygulamalarını derleme

Angular CLI uygulamanızı veya kütüphanenizi ng build komutuyla derleyebilirsiniz. Bu, TypeScript kodunuzu JavaScript'e derler ve çıktıyı uygun şekilde optimize eder, paketler ve küçültür.

ng build yalnızca angular.json içinde belirtilen varsayılan projedeki build hedefi için builder'ı çalıştırır. Angular CLI, genellikle build hedefleri olarak kullanılan dört builder içerir:

ng new tarafından oluşturulan uygulamalar varsayılan olarak @angular/build:application kullanır. ng generate library tarafından oluşturulan kütüphaneler varsayılan olarak @angular/build:ng-packagr kullanır.

Belirli bir proje için hangi builder'ın kullanıldığını, o projenin build hedefine bakarak belirleyebilirsiniz.

{
  "projects": {
    "my-app": {
      "architect": {
        // `ng build`, `build` adlı Architect hedefini çağırır.
        "build": {
          "builder": "@angular/build:application",
          …
        },
        "serve": { … }
        "test": { … }
        …
      }
    }
  }
}

Bu sayfa @angular/build:application kullanımını ve seçeneklerini tartışır.

Çıktı dizini

Bu derleme sürecinin sonucu varsayılan olarak bir dizine (dist/${PROJECT_NAME}) çıktılanır.

Boyut bütçelerini yapılandırma

Uygulamalar işlevsellik açısından büyüdükçe boyut olarak da büyürler. CLI, yapılandırmanızda boyut eşikleri belirlemenize olanak tanır, böylece uygulamanızın parçalarının tanımladığınız boyut sınırları içinde kalmasını sağlayabilirsiniz.

Boyut sınırlarınızı CLI yapılandırma dosyası angular.json içinde, her yapılandırılmış ortam için bir budgets bölümünde tanımlayın.

{
  …
  "configurations": {
    "production": {
      …
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "250kb",
          "maximumError": "500kb"
        },
      ]
    }
  }
}

Tüm uygulama ve belirli parçalar için boyut bütçeleri belirleyebilirsiniz. Her bütçe girişi, belirli bir türde bir bütçe yapılandırır. Örneğin, initial bütçesi uygulamayı başlatmak için kullanılan JavaScript ve CSS'i ölçer; bu, derleme çıktısı özetinde gösterilen Initial Total değerine karşılık gelir. Boyut değerlerini aşağıdaki biçimlerde belirtin:

Bir bütçe yapılandırdığınızda, uygulamanın belirli bir parçası belirlediğiniz sınır boyutuna ulaştığında veya aştığında builder uyarı verir veya hata bildirir.

Her bütçe girişi aşağıdaki özelliklere sahip bir JSON nesnesidir:

Gecikmeli yüklenen bir paket için bütçe yapılandırmak üzere type: "bundle" kullanın ve name değerini o paketin adına ayarlayın.

{
  "budgets": [
    {
      "type": "bundle",
      "name": "admin",
      "maximumWarning": "250kb",
      "maximumError": "300kb"
    }
  ]
}

name alanı, oluşturulan dosya adıyla değil paket adıyla eşleşir; bu nedenle admin.*.js gibi joker karakter veya düzenli ifade kalıpları kullanmaz.

Aşağıdaki örnek, bir temel değer kullanan bir bütçeyi gösterir:

{
  "type": "bundle",
  "name": "main",
  "baseline": "200kb",
  "maximumWarning": "10%",
  "maximumError": "20%"
}

Bu örnekte, builder paket 220kb'nin ötesine büyüdüğünde uyarı verir ve 240kb'nin ötesine büyüdüğünde hata verir.

CommonJS bağımlılıklarını yapılandırma

Uygulamanız ve bağımlılıkları boyunca her zaman yerel ECMAScript modüllerini (ESM) tercih edin. ESM, güçlü statik analiz desteğine sahip, tam olarak belirlenmiş bir web standardı ve JavaScript dil özelliğidir. Bu, paket optimizasyonlarını diğer modül formatlarından daha güçlü hale getirir.

Angular CLI ayrıca projenize CommonJS bağımlılıklarını içe aktarmayı destekler ve bu bağımlılıkları otomatik olarak paketler. Ancak CommonJS modülleri, paketleyicilerin ve küçültücülerin bu modülleri etkili bir şekilde optimize etmesini engelleyebilir, bu da daha büyük paket boyutlarına neden olur. Daha fazla bilgi için CommonJS paketlerinizi nasıl büyütüyor makalesine bakın.

Angular CLI, tarayıcı uygulamanızın CommonJS modüllerine bağımlı olduğunu tespit ederse uyarı verir. Bir CommonJS bağımlılığıyla karşılaştığınızda, bakımcıdan ECMAScript modüllerini desteklemesini istemeyi, bu desteği kendiniz sağlamayı veya ihtiyaçlarınızı karşılayan alternatif bir bağımlılık kullanmayı düşünün. En iyi seçenek bir CommonJS bağımlılığı kullanmaksa, angular.json içindeki build seçeneklerinde bulunan allowedCommonJsDependencies seçeneğine CommonJS modül adını ekleyerek bu uyarıları devre dışı bırakabilirsiniz.

"build": {
  "builder": "@angular/build:application",
  "options": {
     "allowedCommonJsDependencies": [
        "lodash"
     ]
     …
   }
   …
},

Tarayıcı uyumluluğunu yapılandırma

Angular CLI, farklı tarayıcı sürümleriyle uyumluluk sağlamak için Browserslist kullanır. Desteklenen tarayıcılara bağlı olarak, Angular belirli JavaScript ve CSS özelliklerini otomatik olarak dönüştürerek derlenen uygulamanın desteklenen bir tarayıcı tarafından uygulanmamış bir özellik kullanmamasını sağlar. Ancak Angular CLI, eksik Web API'lerini tamamlamak için otomatik olarak polyfill eklemez. Polyfill eklemek için angular.json içindeki polyfills seçeneğini kullanın.

Varsayılan olarak, Angular CLI mevcut ana sürüm için Angular tarafından desteklenen tarayıcılarla eşleşen bir browserslist yapılandırması kullanır.

Dahili yapılandırmayı geçersiz kılmak için, Angular'ın desteklenen tarayıcılarıyla eşleşen bir .browserslistrc yapılandırma dosyası oluşturan ng generate config browserslist komutunu çalıştırın.

browserslist sorgusu ile belirli tarayıcıları ve sürümleri nasıl hedefleyeceğinize dair daha fazla örnek için browserslist deposuna bakın. Bu listeyi daha fazla tarayıcıya genişletmekten kaçının. Uygulama kodunuz daha geniş uyumluluğa sahip olsa bile, Angular'ın kendisi olmayabilir. Bu listedeki tarayıcı veya sürüm setini yalnızca azaltmalısınız.

Tailwind yapılandırma

Angular, yardımcı program öncelikli bir CSS çerçevesi olan Tailwind CSS'i destekler.

Tailwind CSS'i Angular CLI ile entegre etmek için Angular ile Tailwind CSS kullanma belgesine bakın.

Kritik CSS satır içi yerleştirme

Angular, First Contentful Paint (FCP) performansını artırmak için uygulamanızın kritik CSS tanımlarını satır içine alabilir. Bu seçenek varsayılan olarak etkindir. Bu satır içi yerleştirmeyi styles özelleştirme seçeneklerinde devre dışı bırakabilirsiniz.

Bu optimizasyon, başlangıç görünüm alanını oluşturmak için gereken CSS'i çıkarır ve doğrudan oluşturulan HTML'ye satır içi olarak yerleştirir, böylece tarayıcının tam stil sayfalarının yüklenmesini beklemeden içeriği daha hızlı görüntülemesini sağlar. Kalan CSS daha sonra arka planda asenkron olarak yüklenir. Angular CLI, uygulamanızın HTML ve stillerini analiz etmek için Beasties kullanır.