Her Açısal proje için çok sayıda dosya üretildi

594

Angular için basit bir merhaba dünya uygulaması başlatmak istedim.

Resmi hızlı başlangıçtaki talimatları izlediğimde, kurulum projemde 32.000 dosya oluşturdu.

Bunun bir hata olduğunu düşündüm ya da bir şeyleri kaçırdım, bu yüzden açısal cli kullanmaya karar verdim , ancak projeyi kurduktan sonra 41.000 dosya saydım.

Nerede hata yaptım? Gerçekten bariz bir şey mi kaçırıyorum?

javascript  angular 
— Moshe Shaham
kaynak
98
NPM tarafından desteklenen projeler için normaldir.
— Everettss
115
@hendrix çünkü dağıtımım (google uygulama motoru) yalnızca 10 bin dosyaya izin veriyor
— Moshe Shaham
49
Bu sorudaki oyların sayısını ve cevaplarını merak eden herkes için bu, HN ön sayfasını yaptı. news.ycombinator.com/item?id=12209028
— ceejayoz
50
@hendrix - Bahse girerim .DS_Store dosyalarını git.
— Martin Konecny
61
"Merhaba dünya uygulamanız çalışıyorsa, her şey yolundaysa", özellikle de öğrenen biri için izlenecek iyi bir felsefe değildir. OP, neden bu kadar çok dosya oluşturulduğunu sorgulamakta haklıdır. Örneğin kendisi sadece 5 dosyaya başvuruyor. Ve dürüst olmak gerekirse, çıktısında harflerden daha fazla dosya içeren herhangi bir uygulama sorgulanmalıdır.
— Shawn

Yanıtlar:

362

Yapılandırmanızla ilgili yanlış bir şey yok.

Açısal (sürüm 2.0'dan beri), geliştirme için npm modülleri ve bağımlılıkları kullanır. Bu kadar çok sayıda dosyayı görmenizin tek nedeni budur.

Angular'ın temel kurulumu transpiler, sadece geliştirme amacıyla gerekli olan yazım bağımlılıklarını içerir .

Geliştirme bittiğinde, yapmanız gereken tek şey bu uygulamayı paketlemektir.

Uygulamanızı paketledikten bundle.jssonra, sunucunuza dağıtabileceğiniz yalnızca bir dosya olacaktır .

'transpiler' sadece bir derleyici, bunu eklediğiniz için teşekkürler @omninonsense.

— Bhushan Gadekar
kaynak
7
Aynı zamanda test verilerini ve testleri getirir ve bağımlılıklar ve bağımlılıkları için araçlar oluşturur.
— Benjamin Gruenbaum
63
"Transpiler" sadece bir derleyicidir.
— omninonsense
32
ancak bayt kodu veya makine kodu yerine başka bir dile derler
— Hunter McMillen
32
@HunterMcMillen Bayt kodu ve / veya Makine kodu başka bir dildir. "Transpiler" teriminin "derleyici" den başka bir anlamı yoktur.
— Brandon Buck
76
İlgili tüm semantik argümanı OP'nin sorusuyla gerçekten ilgili olduğundan emin değilim ^^
— Dan Pantry
144 
                                Typical Angular2 Project

NPM Paket                        Dosyaları (Geliştirme)                   Gerçek Dünya Dosyaları (Dağıtım) 

@angular                       3,236                             1
rxJS                           1,349                             1*
core-js                        1,341                             2
typings                        1,488                             0
gulp                           1,218                             0
gulp-typescript                1,243                             0
lite-server                    5,654                             0
systemjs-builder               6,470                             0
__________________________________________________________________
Total                         21,999                             3

*: bundled with @angular

[ demetleme işlemi için buna bakınız ⇗ ]

— Ankit Singh
kaynak
24
Sanırım -3toplamı yapmadığı için verildi, ama şimdi var :)
— Ankit Singh
1
gerçek dünya dosyaları ile ne demek istiyorsun?
— yeahman
1
@yeahman "gerçek dünya dosyalar" proje olan dosyaların sayısı ise dağıtılan veya üretimde .
— Maarti
Ayrıca boyut sayısı, sadece 3 dosya, ancak büyük olabilir (web için)
— pdem
51

Geliştirme yapılandırmanızda yanlış bir şey yok .

Senin ile şeyler ters üretim yapılandırması.

Bir "Açısal 2 Proje" veya "JS tabanlı herhangi bir Proje" geliştirdiğinizde tüm dosyaları kullanabilirsiniz, tüm dosyaları deneyebilirsiniz, tüm dosyaları alabilirsiniz. Bu projeyi hizmet etmek istiyorum Ama gerek KOMBİNE tüm yapılandırılmış dosya ve gereksiz dosyaları kurtulmak.

Bu dosyaları bir araya getirmek için birçok seçenek var:

— kasırga
kaynak
2
Dosyaları sunucuda bir araya getirmemelisiniz (alıntı yapmanız gerekir). En çok bir transpiler kullanırdım.
— Dan Pantry
1
@DanPantry Transpiller kaynaktan kaynağa derleyicilerdir. Ben sadece "X" "JS" değiştirebilir düşünüyorum. Dosya sayısı aynı.
— kasırgası
1
..Evet, ama ne demek istediğinden emin değilim. Demek istediğim, muhtemelen sunucu kodunu küçültmeye çalışmamalısınız (dosyaları birleştirerek ve böylece dosya boyutunu azaltarak). Async / await gibi kanama özelliklerini kullanıyorsanız, kodunuzda en fazla Babel'i kullanmalısınız.
— Dan Pantry
2
@DanPantry Sana katılıyorum. Ancak yorumlarda soru soran kişi "dağıtımım (google app engine) yalnızca 10 bin dosyaya izin verdiğinden" diyor. Bu koşullarda dosya sayılarını en aza indirmemiz gerekir.
— kasırgası
4
Sana katılıyorum ama OP'nin burada bir XY sorunu var gibi görünüyor
— Dan Pantry
30

Daha önce de belirtildiği gibi: node_modules dizininizdeki (paketler için NPM konumu) tüm dosyalar proje bağımlılıklarınızın bir parçasıdır (Doğrudan bağımlılıklar denir). Buna ek olarak, bağımlılıklarınızın da kendi bağımlılıkları vb. Olabilir. (Geçişli bağımlılıklar denir). Birkaç on bin dosya özel bir şey değildir.

Yalnızca 10.000 dosya yüklemenize izin verildiği için (Yorumlara bakın), bir bundler motoruyla giderdim. Bu motor, tüm JavaScript, CSS, HTML vb. Öğelerinizi bir araya getirecek ve tek bir demet oluşturacak (veya belirttiğinizde daha fazla). İndex.html dosyanız bu paketi yükleyecek ve hepsi bu kadar.

Ben bir webpack hayranıyım, bu yüzden webpack çözümüm bir uygulama paketi ve bir satıcı paketi oluşturacak (Tam çalışan uygulama için buraya bakın https://github.com/swaechter/project-collection/tree/master/web-angular2- örnek ):

index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Webcms</title>
</head>
<body>
<webcms-application>Applikation wird geladen, bitte warten...</webcms-application>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

webpack.config.js

var webpack = require("webpack");
var path = require('path');

var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

/*
 * Configuration
 */
module.exports = {
    devtool: 'source-map',
    debug: true,

    entry: {
        'main': './app/main.ts'
    },

    // Bundle configuration
    output: {
        path: root('dist'),
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
    },

    // Include configuration
    resolve: {
        extensions: ['', '.ts', '.js', '.css', '.html']
    },

    // Module configuration
    module: {
        preLoaders: [
            // Lint all TypeScript files
            {test: /\.ts$/, loader: 'tslint-loader'}
        ],
        loaders: [
            // Include all TypeScript files
            {test: /\.ts$/, loader: 'ts-loader'},

            // Include all HTML files
            {test: /\.html$/, loader: 'raw-loader'},

            // Include all CSS files
            {test: /\.css$/, loader: 'raw-loader'},
        ]
    },

    // Plugin configuration
    plugins: [
        // Bundle all third party libraries
        new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}),

        // Uglify all bundles
        new UglifyJsPlugin({compress: {warnings: false}}),
    ],

    // Linter configuration
    tslint: {
        emitErrors: false,
        failOnHint: false
    }
};

// Helper functions
function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}

Avantajları:

  • Komple üretim hattı (TS astarlama, derleme, küçültme vb.)
  • Dağıtım için 3 dosya -> Yalnızca birkaç Http isteği

Dezavantajları:

  • Daha yüksek inşa süresi
  • Http 2 projeleri için en iyi çözüm değil (Feragatnameye bakın)

Feragatname: Bu, Http 1 * için iyi bir çözümdür, çünkü her Http isteği için ek yükü en aza indirir. Yalnızca index.html ve her paket için bir isteğiniz vardır, ancak 100-200 dosya için değil. Şu an, bu yol.

Http 2, diğer taraftan, Http yükünü en aza indirmeye çalışır, bu nedenle bir akış protokolüne dayanır. Bu akış her iki yönde de iletişim kurabilir (İstemci <--> Sunucu) ve bu nedenle daha akıllı bir kaynak yüklemesi mümkündür (Yalnızca gerekli dosyaları yüklersiniz). Akış, Http ek yükünün çoğunu ortadan kaldırır (Daha az Http turları).

Ancak IPv6 ile aynı: İnsanların gerçekten Http 2'yi kullanması birkaç yıl sürecek

— swaechter
kaynak
1
Yine de gerekli değildir, çünkü OP angular-clizaten bir paketleyiciyle (aynı önerilen web paketi) birlikte gelir.
— mattarau
2
@mdentinho Evet, daha modern sürümlerde. Ama 2016'da SystemJS ve CLI gitmenin yoluydu (Memnuniyetle şimdi web paketimiz var)
— swaechter
21

Açısal CLI tarafından oluşturulan projenizden dist (dağıtılabilir kısaltma) klasörünü dağıttığınızdan emin olmanız gerekir . Bu, aracın kaynak kodunuzu ve bağımlılıklarını almasına ve yalnızca uygulamanızı çalıştırmak için ihtiyacınız olanı vermesine olanak tanır.

Angular CLI ile `` build-prod '' aracılığıyla üretim yapıları ile ilgili bir sorun olduğu / olduğu söyleniyor

Bugün (Ağustos 2, 2016), bir serbest bırakma ile ilgili yapı mekanizmasının açık olan yapıldı brokoli + systemjs için WebPack başarılı üretimi oluşturur yönetir.

Bu adımlara dayanarak:

ng new test-project
ng build --prod

Burada listelenen 14 dosya boyunca 1.1 MBdist klasör boyutu görüyorum :

./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js

Not Şu anda açısal klibin webpack sürümünü kurmak için şunu çalıştırmalısınız ...npm install angular-cli@webpack -g

— Brocco
kaynak
12

Kimse burada açıklandığı gibi Zamanın Önünde Derleme'den bahsetmemiş gibi görünüyor: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Şu ana kadar Angular 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 şablonu işaretlemenizin, orijinal HTML'ye tersine mühendislik yapmak çok zor olacak javascript talimatlarına dönüştürüldüğünü görmek de çok güzel.

Dev vs AoT derlemesinde bir Angular uygulaması için indirme boyutunu, dosya sayısını vb.Göstereceğim basit bir video yaptım - burada görebilirsiniz:

https://youtu.be/ZoZDCgQwnmQ

Demo için kaynak kodunu burada bulabilirsiniz:

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

Ve - diğerlerinin burada söylediği gibi - geliştirme ortamınızda birçok dosya olduğunda yanlış bir şey yoktur. Angular ve diğer birçok modern çerçeveyle birlikte gelen tüm bağımlılıklar böyle. Ancak buradaki fark, üretime gönderirken birkaç dosyaya paketleyebilmenizdir. Ayrıca git deponuzda bu bağımlılık dosyalarının tümünü istemezsiniz.

— Peter Salomonsen
kaynak
8

Bu aslında Angular'a özgü değildir, araçları için NodeJs / npm ekosistemini kullanan hemen hemen her projede olur.

Bu proje node_modules klasörlerinizin içindedir ve doğrudan bağımlılıklarınızın çalışması için gereken transitit bağımlılıklarıdır.

Düğüm ekosistemi modülleri genellikle küçüktür, yani kendimizi bir şeyler geliştirmek yerine ihtiyacımız olan şeylerin çoğunu bir modül formunda ithal etme eğilimindeyiz. Bu, ünlü sol ped işlevi gibi küçük şeyleri içerebilir, neden bir egzersiz olarak değilse kendimiz yazalım?

Bu yüzden birçok dosyaya sahip olmak aslında iyi bir şey, her şeyin çok modüler olduğu ve modül yazarlarının diğer modülleri sık sık yeniden kullandıkları anlamına geliyor. Bu modülerlik kolaylığı, muhtemelen düğüm ekosisteminin bu kadar hızlı büyümesinin ana nedenlerinden biridir.

Prensipte bu herhangi bir soruna neden olmamalıdır, ancak bir google app engine dosya sayısı sınırına girdiğiniz görülüyor. Bu durumda uygulama motoruna node_modules yüklememenizi öneririm.

bunun yerine uygulamayı yerel olarak oluşturun ve google uygulama motoruna yalnızca birlikte gelen dosyalara yükleyin, ancak uygulama motorunun kendisine yüklenmeyin.

— Açısal Üniversite
kaynak
8

Açısal klibin yeni sürümünü kullanıyorsanız ng build --prod

Dağıtım oluşturacak az dosyaya sahip klasörü oluşturacak ve proje hızı artacaktır.

Ayrıca açısal klipsin en iyi performansıyla yerel olarak test etmek için kullanabilirsiniz ng serve --prod

— Jalay Oza
kaynak
6

Açısal CLI kullanıyorsanız, bir proje oluştururken her zaman --minimal flag kullanabilirsiniz. 

ng new name --minimal

Ben sadece bayrağı ile çalıştırın ve 24 600 dosya oluşturur ve ng build --prod212 KB dist klasörü üretir

Projenizde su çeşmelerine ihtiyacınız yoksa veya sadece bir şeyi hızlı bir şekilde test etmek istiyorsanız, bunun oldukça yararlı olduğunu düşünüyorum

— SebOlens
kaynak
5

Son zamanlarda açısal cli ve node_modules klasörü ile yeni bir proje oluşturma 270 mb, bu yüzden evet bu normal ama eminim açısal dünya sorusu için en yeni geliştiriciler bu ve geçerli. Basit bir yeni proje için, bağımlılıkları biraz aşağıya dökmek mantıklı olacaktır;) Tüm paketlerin neye bağlı olduğunu bilmemek, özellikle ilk kez klibi deneyen yeni geliştiricilere biraz sinir bozucu olabilir. Çoğu temel öğreticinin yalnızca gereken dışa aktarılan dosyaları almak için dağıtım ayarlarını tartışmaması gerçeğini ekleyin. Açısal resmi web sitesinde sunulan öğreticinin bile basit projenin nasıl konuşlandırılacağından bahsettiğine inanmıyorum.

Görünüşe göre node_modules klasörü suçlu

— Maguy
kaynak
4

İşte açısal projelerde daha fazla yer kaplayan şeyin bir karşılaştırması. resim açıklamasını buraya girin

— Jagadesha NH
kaynak
3

Dosya sisteminiz sembolik bağlantıları destekliyorsa, en azından tüm bu dosyaları gizli bir klasöre atayabilirsiniz - böylece gibi akıllı bir araç treevarsayılan olarak bunları göstermez.

mv node_modules .blergyblerp && ln -s .blergyblerp node_modules

Bunun için gizli bir klasör kullanmak, bunların revizyon kontrolüne kaydedilmesi gerekmeyen veya doğrudan dağıtımınızda kullanılması gereken derleme ile ilgili ara dosyalar olduğunu anlamaya teşvik edebilir.

— bar yok
kaynak
— nobar
2

Yanlış bir şey yok. Bunlar package.json içinde bahsettiğiniz düğüm bağımlılıklarıdır.

Git hub projesinden bazılarını indirdiyseniz dikkatli olun, aslında açısal 2 ilk merhaba dünya uygulaması için gerekli olmayan diğer bağımlılıklara sahip olabilir :)

  • açısal bağımlılıklarınız olduğundan emin olun -rxjs -gulp -typescript -tslint -docker
— Piyush anwekar
kaynak
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.