Sejumlah besar file dihasilkan untuk setiap proyek Angular

594

Saya ingin memulai aplikasi hello world sederhana untuk Angular.

Ketika saya mengikuti instruksi di quickstart resmi , instalasi membuat 32.000 file di proyek saya.

Saya pikir ini adalah kesalahan atau saya melewatkan sesuatu, jadi saya memutuskan untuk menggunakan angular-cli , tetapi setelah menyiapkan proyek saya menghitung 41.000 file.

Di mana saya salah? Apakah saya kehilangan sesuatu yang sangat jelas?

javascript angular Moshe Shaham
sumber
98
Itu normal untuk proyek yang ditenagai oleh NPM.
Everettss
115
@hendrix karena penerapan saya (mesin app google) hanya memungkinkan 10 ribu file
Moshe Shaham
49
Bagi siapa pun yang ingin tahu tentang jumlah suara pada pertanyaan ini dan jawabannya, ini menjadi halaman depan HN. news.ycombinator.com/item?id=12209028
ceejayoz
50
@ Hendrix - Saya yakin Anda berkomitmen file .DS_Store untuk git juga.
Martin Konecny
61
Saya pikir "Jika aplikasi hello world Anda berfungsi, semuanya baik-baik saja" bukanlah filosofi yang baik untuk diikuti, terutama bagi seseorang yang sedang belajar. OP tepat untuk mempertanyakan mengapa begitu banyak file dibuat. Contoh itu sendiri merujuk hanya 5 file. Dan sejujurnya, aplikasi apa pun yang memiliki lebih banyak file daripada huruf dalam outputnya harus dipertanyakan.
Shawn

Jawaban:

362

Tidak ada yang salah dengan konfigurasi Anda.

Angular (sejak versi 2.0) menggunakan modul npm dan dependensi untuk pengembangan. Itulah satu-satunya alasan Anda melihat begitu banyak file.

Pengaturan dasar Angular berisi transpiler, dependensi pengetikan yang penting untuk tujuan pengembangan saja.

Setelah Anda selesai dengan pengembangan, yang perlu Anda lakukan hanyalah menggabungkan aplikasi ini.

Setelah menggabungkan aplikasi Anda, hanya akan ada satu bundle.jsfile yang dapat Anda gunakan di server Anda.

'Transpiler' hanyalah kompiler, terima kasih @omninonsense karena menambahkannya.

Bhushan Gadekar
sumber
7
Ini juga biasanya membawa data uji dan tes dan membangun alat untuk dependensi dan dependensinya dan seterusnya.
Benjamin Gruenbaum
63
"Transpiler" hanyalah kompiler.
omninonsense
32
tetapi mengkompilasi ke bahasa lain alih-alih ke kode byte atau kode mesin
Hunter McMillen
32
@HunterMcMillen Byte code dan / atau Machine code adalah bahasa lain. Istilah "transpiler" tidak memiliki arti tambahan selain "kompiler."
Brandon Buck
76
Sehubungan dengan semua yang terlibat, saya tidak yakin argumen semantik benar-benar relevan dengan pertanyaan OP ^^
Dan Pantry
144 
                                Typical Angular2 Project

                       File                   Paket NPM (Pengembangan) File Dunia Nyata (Penerapan) 

@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

[ lihat ini untuk proses bundling ⇗ ]

Ankit Singh
sumber
24
Saya kira -3diberikan karena tidak melakukan penjumlahan, tapi sekarang saya punya :)
Ankit Singh
1
apa yang Anda maksud dengan file dunia nyata?
yeahman
1
@yeahman "file dunia nyata" adalah jumlah file ketika proyek Anda digunakan atau dalam produksi .
Maarti
Juga ukuran ukuran, hanya 3 file, tetapi mereka mungkin besar (untuk web)
pdem
51

Tidak ada yang salah dengan konfigurasi pengembangan Anda .

Ada yang salah dengan konfigurasi produksi Anda .

Ketika Anda mengembangkan "Proyek 2 Sudut" atau "Proyek Apa pun yang didasarkan pada JS" Anda dapat menggunakan semua file, Anda dapat mencoba semua file, Anda dapat mengimpor semua file. Tetapi jika Anda ingin melayani proyek ini, Anda perlu MENGGABUNGKAN semua file terstruktur dan menyingkirkan file yang tidak berguna.

Ada banyak opsi untuk menggabungkan file-file ini bersama-sama:

badai
sumber
2
Anda tidak boleh (rujukan?) Menggabungkan file-file bersama di server. Paling-paling, saya akan menggunakan transpiler.
Dan Pantry
1
@DanPantry Transpilers adalah kompiler sumber-ke-sumber. Saya pikir mereka hanya dapat mengubah "X" menjadi "JS". Jumlah file sama.
badai
1
..Ya, tapi saya tidak yakin dengan maksud Anda. Maksud saya adalah Anda mungkin tidak boleh mencoba untuk mengecilkan kode server (dengan menggabungkan file dan dengan demikian mengurangi ukuran file). Paling-paling, Anda harus menggunakan Babel pada kode Anda jika Anda menggunakan fitur pendarahan seperti async / menunggu.
Dan Pantry
2
@DanPantry Saya setuju dengan Anda. Tetapi pada komentar penanya mengatakan "karena penyebaran saya (mesin app google) hanya memungkinkan 10 ribu file". Dalam kondisi ini kita perlu memperkecil jumlah file.
badai
4
Saya setuju dengan Anda tetapi OP tampaknya memiliki masalah XY di sini
Dan Pantry
30

Seperti yang sudah disebutkan beberapa orang: Semua file di direktori node_modules Anda (lokasi NPM untuk paket) adalah bagian dari dependensi proyek Anda (Disebut dependensi langsung). Sebagai tambahan untuk itu, dependensi Anda juga dapat memiliki dependensi mereka sendiri dan seterusnya, dll. (Disebut dependensi transitif). Beberapa sepuluh ribu file tidak ada yang istimewa.

Karena Anda hanya diperbolehkan mengunggah 10'000 file (Lihat komentar), saya akan menggunakan mesin bundler. Mesin ini akan menggabungkan semua JavaScript, CSS, HTML, dll. Anda dan membuat satu bundel (atau lebih jika Anda menentukannya). Index.html Anda akan memuat bundel ini dan hanya itu.

Saya penggemar webpack, jadi solusi webpack saya akan membuat bundel aplikasi dan bundel vendor (Untuk aplikasi yang berfungsi penuh lihat di sini https://github.com/swaechter/project-collection/tree/master/web-angular2- contoh ):

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));
}

Keuntungan:

  • Garis build penuh (TS linting, compiling, minification, dll.)
  • 3 file untuk penyebaran -> Hanya beberapa permintaan Http

Kekurangan:

  • Waktu membangun lebih tinggi
  • Bukan solusi terbaik untuk proyek Http 2 (Lihat penafian)

Penafian: Ini adalah solusi yang baik untuk Http 1. *, karena meminimalkan biaya overhead untuk setiap permintaan Http. Anda hanya memiliki permintaan untuk index.html Anda dan setiap bundel - tetapi tidak untuk 100 - 200 file. Saat ini, inilah jalan yang harus ditempuh.

Http 2, di sisi lain, mencoba untuk meminimalkan overhead Http, jadi ini didasarkan pada protokol streaming. Aliran ini dapat berkomunikasi dalam dua arah (Klien <--> Server) dan sebagai alasannya, pemuatan sumber daya yang lebih cerdas dimungkinkan (Anda hanya memuat file yang diperlukan). Aliran menghilangkan banyak overhead Http (Perjalanan pulang-pergi Http kurang).

Tetapi sama dengan IPv6: Dibutuhkan beberapa tahun hingga orang benar-benar menggunakan Http 2

swaechter
sumber
1
Namun tidak perlu, karena OP disebutkan menggunakan angular-cliyang sudah dilengkapi dengan bundler (paket web yang disarankan sama).
mattarau
2
@mdentinho Ya, dalam rilis yang lebih modern. Tetapi pada 2016 SystemJS dan CLI adalah jalan yang harus ditempuh (Senangnya kami memiliki webpack sekarang)
swaechter
21

Anda perlu memastikan bahwa Anda hanya menggunakan folder dist (kependekan yang dapat didistribusikan) dari proyek Anda yang dihasilkan oleh Angular CLI . Ini memungkinkan alat untuk mengambil kode sumber Anda dan dependensinya dan hanya memberi Anda apa yang Anda butuhkan untuk menjalankan aplikasi Anda.

Yang sedang berkata ada / adalah masalah dengan CLI Angular dalam hal membangun produksi melalui `ng build --prod

Kemarin (2 Agustus 2016) sebuah rilis dilakukan yang mengubah mekanisme build dari brokoli + systemjs ke webpack yang berhasil menangani build produksi.

Berdasarkan langkah-langkah ini:

ng new test-project
ng build --prod

Saya melihat distukuran folder 1,1 MB di 14 file yang tercantum di sini:

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

Catatan Saat ini untuk menginstal versi webpack dari sudut sudut, Anda harus menjalankan ...npm install angular-cli@webpack -g

Brocco
sumber
12

Sepertinya tidak ada yang menyebutkan Kompilasi Ahead-of-Time seperti yang dijelaskan di sini: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Pengalaman saya dengan Angular sejauh ini adalah bahwa AoT menciptakan build terkecil dengan hampir tanpa waktu pemuatan. Dan yang paling penting karena pertanyaan di sini adalah tentang - Anda hanya perlu mengirimkan beberapa file ke produksi.

Ini sepertinya karena kompiler Angular tidak akan dikirimkan dengan build produksi karena templat dikompilasi "Ahead of Time". Ini juga sangat keren untuk melihat markup template HTML Anda ditransformasikan menjadi instruksi javascript yang akan sangat sulit untuk merekayasa balik menjadi HTML asli.

Saya telah membuat video sederhana di mana saya mendemonstrasikan ukuran unduhan, jumlah file, dll. Untuk aplikasi Angular di dev vs AoT build - yang dapat Anda lihat di sini:

https://youtu.be/ZoZDCgQwnmQ

Anda akan menemukan kode sumber untuk demo di sini:

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

Dan - seperti yang dikatakan semua orang di sini - tidak ada yang salah ketika ada banyak file di lingkungan pengembangan Anda. Begitulah halnya dengan semua dependensi yang datang dengan Angular, dan banyak kerangka kerja modern lainnya. Tetapi perbedaannya di sini adalah bahwa ketika pengiriman ke produksi Anda harus dapat mengemasnya ke dalam beberapa file. Anda juga tidak ingin semua file dependensi ini berada di repositori git Anda.

Peter Salomonsen
sumber
8

Ini sebenarnya bukan spesifik Angular, ini terjadi pada hampir semua proyek yang menggunakan ekosistem NodeJs / npm untuk toolingnya.

Proyek tersebut ada di dalam folder node_modules Anda, dan merupakan dependensi transititve yang harus dijalankan dependensi langsung Anda.

Dalam modul node node biasanya kecil, yang berarti bahwa alih-alih mengembangkan sendiri, kita cenderung mengimpor sebagian besar dari apa yang kita butuhkan dalam bentuk modul. Ini dapat mencakup hal-hal kecil seperti fungsi pad kiri yang terkenal, mengapa menulisnya sendiri jika bukan sebagai latihan?

Jadi memiliki banyak file sebenarnya adalah hal yang baik, artinya semuanya sangat modular dan penulis modul sering menggunakan kembali modul lain. Kemudahan modularitas ini mungkin salah satu alasan utama mengapa ekosistem node tumbuh begitu cepat.

Pada prinsipnya ini seharusnya tidak menyebabkan masalah, tetapi tampaknya Anda mengalami batas jumlah file mesin aplikasi google. Dalam hal ini saya sarankan untuk tidak mengunggah node_modules ke mesin aplikasi.

alih-alih bangun aplikasi secara lokal dan unggah ke google app engine hanya file yang dibundel tetapi jangan ke engine build in itu sendiri.

Universitas Angular
sumber
8

Jika Anda menggunakan versi sudut yang lebih baru, gunakan ng build --prod

Ini akan membuat folder dist yang memiliki lebih sedikit file dan kecepatan proyek akan meningkat.

Juga untuk pengujian di lokal dengan performa terbaik sudut yang dapat Anda gunakan ng serve --prod

Jalay Oza
sumber
6

jika Anda menggunakan Angular CLI Anda selalu dapat menggunakan flag --minimal saat Anda membuat proyek 

ng new name --minimal

Saya baru saja menjalankannya dengan flag dan menciptakan 24 600 file dan ng build --prodmenghasilkan folder dist 212 KB

Jadi jika Anda tidak memerlukan air mancur di proyek Anda atau hanya ingin dengan cepat menguji sesuatu, saya pikir ini cukup berguna

Sebolen
sumber
5

Membuat proyek baru dengan cli sudut baru-baru ini dan folder node_modules adalah 270 mb, jadi ya ini normal tapi saya yakin sebagian besar pengembang baru ke dunia sudut mempertanyakan hal ini dan valid. Untuk proyek baru yang sederhana, masuk akal untuk mengurangi ketergantungan mungkin sedikit;) Tidak mengetahui semua paket tergantung pada apa yang bisa membuat sedikit menakutkan terutama untuk pengembang baru yang mencoba cli out untuk pertama kalinya. Tambahkan ke fakta sebagian besar tutorial dasar tidak membahas pengaturan penyebaran untuk mendapatkan file yang diekspor hanya diperlukan. Saya tidak percaya bahkan tutorial yang ditawarkan di situs web resmi angular berbicara tentang cara menggunakan proyek sederhana ini.

Sepertinya folder node_modules adalah penyebabnya

maguy
sumber
4

Berikut adalah perbandingan dari apa yang membutuhkan lebih banyak ruang dalam proyek sudut. masukkan deskripsi gambar di sini

Jagadesha NH
sumber
3

Jika sistem file Anda mendukung tautan simbolis, maka Anda setidaknya dapat memindahkan semua file ini ke folder tersembunyi - sehingga alat pintar seperti treetidak akan menampilkannya secara default.

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

Menggunakan folder tersembunyi untuk ini juga dapat mendorong pemahaman bahwa ini adalah file perantara terkait-bangunan yang tidak perlu disimpan untuk kontrol revisi - atau digunakan langsung dalam penyebaran Anda.

bangsawan
sumber
Breadcrumb saya sudah basi, tapi inilah yang dimaksud: web.archive.org/web/20150216184318/https://docs.npmjs.com/misc/…
nobar
2

Tidak ada yang salah. Ini semua dependensi simpul yang telah Anda sebutkan di package.json.

Berhati-hatilah jika Anda telah mengunduh beberapa proyek git hub, mungkin ada banyak dependensi lain yang sebenarnya tidak diperlukan untuk aplikasi hello world first sudut 2 :)

  • pastikan Anda memiliki dependensi sudut -rxjs -gulp -typescript -tslint -docker
piyush anwekar
sumber