SystemJS (angular2.0): Ayrı dosyalar yüklenirken bir büyük JS'yi küçültün?

Question

SystemJS ile ilgili biraz kafam karışık, dosyaları otomatik olarak ayrı ayrı yükler ve bunları büyük bir js dosyası halinde derlemez ve en aza indirmez.

Orijinal fikrin daha küçük kötü uygulamalar olsa da farklı dosyalar için istekte bulunduğunu düşündüm. Ve tercih edilen büyük bir js dosyası (minimified) ve bunun yerine üretildi.

Şu anda SystemJS'nin ayrı dosyaları yüklemek için nasıl yüklendiğimi buradan görebilirsiniz (aşağıya bakın), şimdi bunu yapmanın önerilen yolu bu mu?

System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('app/main') 
       .then(null, console.error.bind(console)); 

Answer 1

System.js (yani ES6 modülü standart)

Geliştirme

Ayrı dosyalar on-the-fly transpilation yapmak için kullanılır + geliştirme iş akışı değişikliklerini Tek tek dosyaların test edilmesi, yeniden yüklenmesi ve/veya yeniden yüklenmesi, her değişiklikten sonra tüm uygulama paketini oluşturmaya/oluşturmaya gerek kalmadan çalışır. örneğin WebPack ve JSPM gibi araçlar kullanarak kullanılarak bir ya da daha fazla devamlı lif haline Üretim dosyaları tek tek transpiled ve birleştirilir

olarak

.

Hem JSPM hem de Webpack (sürüm 2'den itibaren), varsayılan olarak ES6 modüllerini destekler ve paket çıktısında kullanılmayan kodu ortadan kaldırmak için ağaç çalkalamasından (örneğin, rollup.js) faydalanabilir.

Yanında: Sonunda, HTTP2 çoğu/tüm sunucular tarafından desteklendiğinde ve ES6 modülü standardı tüm tarayıcılar tarafından doğal olarak desteklendiğinde, demetleme bir anti-desen haline gelir. Paketlemenin (yani HTTP isteklerinin azaltılması) yararı artık geçerli olmayacak ve olumsuzluklar (yani, önbellekleme özellikleri, artırılmış geliştirme karmaşıklığı), onu kullanmamak için yeterli sebep olacaktır.

sıkışmak yerine ağaç izlerini uygulamanın ithalat yollarının tümünün çıkış dahil edilecek olan kod belirlemek için sallayarak, dosya ithalatını azaltarak paketlerini optimize

Ağacı. Örneğin, uygulamanızın verileri eşzamansız bir şekilde almak için Rxjs gözlenebilirlerini kullanıyorsa, paketin tamamını içe aktarabilirsiniz.

import 'rxjs'; 

Başlamak için iyi çalışıyor ancak verimli değil. Paketleme işleminin ağaç sallayarak adımında, hangi kodun | kullanılmadığını belirlemenin bir yolu yoktur, böylece tüm Rxjs paketi çıktıya dahil edilir.

Çıkış grubu boyutunu en iyi duruma getirmek için, uygulama kodunuzda yalnızca Rxjs'nin özelliklerini içe aktarmak tercih edilir.

import { Observable } from 'rxjs/Observable'; 
import { map } from 'rxjs/operators/map'; 
import { startWith } from 'rxjs/operators/startWith'; 

ağaç sallama adım çalıştırır

, bir Observable oluşturmak gerekli Rxjs paketinden sadece kod içeren ve map ve startWith operatörlerini kullanacağız.

Transpilation

ağaç sallama ve donatılacak ek olarak, ayrıca ES5 için ES6/typescript kaynağını transpile için bir strateji gerekir. Geleneksel olarak, Grunt veya Gulp gibi otomasyon araçları, hem geliştirme hem de üretim için kodun transpile edilmesi, birleştirilmesi, küçültülmesi/ugrasması için gerekli adımları manuel olarak belirtmiştir.

JSPM kendi kendine çalışan bir paket

jspm bundle-sfx app/main dist/main --uglify 

oluşturarak işleyebilir

WebPack ES6/typescript transpilation, her iki araç Ayrıca kaldıraç yükleyiciler ek olarak aynı

webpack -p app/main.js dist/main.js 

başarmak/css ve scss gibi diğer dosya türlerini destekleyen eklentiler.