प्रत्येक कोणीय परियोजना के लिए उत्पन्न बड़ी संख्या में फाइलें

Question

मैं एंगुलर के लिए एक सरल हैलो वर्ल्ड ऐप शुरू करना चाहता था।

जब मैंने आधिकारिक क्विकस्टार्ट में निर्देशों का पालन किया तो स्थापना ने मेरी परियोजना में 32,000 फाइलें बनाईं।

मुझे लगा कि यह कुछ गलती है या मैं कुछ चूक गया, इसलिए मैंने कोणीय-क्ली का उपयोग करने का फैसला किया , लेकिन परियोजना की स्थापना के बाद मैंने 41,000 फाइलें गिना।

मुझसे कहां गलती हो गई? क्या मैं वास्तव में स्पष्ट रूप से कुछ याद कर रहा हूं?

Comments

यह एनपीएम द्वारा संचालित परियोजनाओं के लिए सामान्य है।

— एवरेट्स 11

@ हेंड्रिक्स क्योंकि मेरी तैनाती (Google ऐप इंजन) केवल 10K फ़ाइलों की अनुमति देता है

— मोशे शाहम

इस सवाल और इसके जवाबों पर वोटों की संख्या के बारे में उत्सुक किसी के लिए, इसने HN फ्रंट पेज बना दिया। news.ycombinator.com/item?id=12209028

— ceejayoz

@ हेंड्रिक्स - मैं शर्त लगाता हूं कि आप .DS_Store फाइल्स को भी git करें।

— मार्टिन कोन्सेनी

मुझे लगता है कि "यदि आपका हैलो वर्ल्ड ऐप काम कर रहा है, तो सब कुछ ठीक है" का पालन करने के लिए एक अच्छा दर्शन नहीं है, खासकर किसी ऐसे व्यक्ति के लिए जो सीख रहा है। ओपी सवाल करने के लिए बिल्कुल सही है कि इतनी सारी फाइलें क्यों बनाई गईं। उदाहरण स्वयं केवल 5 फ़ाइलों का संदर्भ देता है। और ईमानदारी से, किसी भी एप्लिकेशन के पास इसके आउटपुट में जितने अक्षर हैं, उससे अधिक फाइलों पर सवाल उठाए जाने चाहिए।

— शॉन

Answer 1

आपके कॉन्फ़िगरेशन में कुछ भी गलत नहीं है।

कोणीय (संस्करण 2.0 से) विकास के लिए npm मॉड्यूल और निर्भरता का उपयोग करता है। यही एकमात्र कारण है कि आप इतनी बड़ी संख्या में फाइलें देख रहे हैं।

कोणीय के एक मूल सेटअप में ट्रांसपिलर, टाइपिंग निर्भरताएं होती हैं जो केवल विकास के उद्देश्य के लिए आवश्यक हैं ।

एक बार जब आप विकास के साथ हो जाते हैं, तो आपको केवल इस एप्लिकेशन को बंडल करना होगा।

आपके एप्लिकेशन को बंडल करने के बाद, केवल एक bundle.jsफ़ाइल होगी जिसे आप अपने सर्वर पर तैनात कर सकते हैं।

'ट्रांसपिलर' सिर्फ एक संकलक है, धन्यवाद @omninonsense कि जोड़ने के लिए।

Comments

यह आम तौर पर परीक्षण डेटा और परीक्षणों को भी लाता है और निर्भरता और उनकी निर्भरता के लिए उपकरणों का निर्माण करता है और इसी तरह।

— बेंजामिन ग्रुएनबाम

एक "ट्रांसपिलर" सिर्फ एक संकलक है।

— omninonsense

लेकिन बाइट कोड या मशीन कोड के बजाय दूसरी भाषा के लिए संकलित करता है

— हंटर मैकमिलन

@HunterMcMillen बाइट कोड और / या मशीन कोड एक और भाषा है। "ट्रांसपिलर" शब्द का "कंपाइलर" से कोई अतिरिक्त अर्थ नहीं है।

— ब्रैंडन बक

सभी के संबंध में मुझे यकीन नहीं है कि शब्दार्थ तर्क ओपी के प्रश्न के लिए वास्तव में प्रासंगिक है ^ ^

— डैन पेंट्री

Answer 2

                                Typical Angular2 Project

एनपीएम पैकेज                        फाइलें (विकास)                   वास्तविक दुनिया फाइलें (तैनाती)

@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

[ बंडलिंग प्रक्रिया के लिए इसे देखें bund ]

Comments

मुझे लगता है कि -3योग नहीं करने के लिए दिया गया था, लेकिन अब मेरे पास :)

— अंकित सिंह

असली दुनिया फ़ाइलों से आपका क्या मतलब है?

— यमन

जब आपकी परियोजना तैनात हो या उत्पादन में @yeahman "वास्तविक दुनिया की फाइलें" फाइलों की संख्या हो ।

— मर्त्य

इसके अलावा आकार की गणना, केवल 3 फाइलें, लेकिन वे बहुत बड़ी हो सकती हैं (वेब ​​के लिए)

— पीडीएम

Answer 3

आपके विकास कॉन्फ़िगरेशन में कुछ भी गलत नहीं है ।

आपके उत्पादन कॉन्फ़िगरेशन में कुछ गड़बड़ है।

जब आप "Angular 2 Project" या "Any Project जो कि JS पर आधारित है" विकसित करते हैं, तो आप सभी फ़ाइलों का उपयोग कर सकते हैं, आप सभी फ़ाइलों को आज़मा सकते हैं, आप सभी फ़ाइलों को आयात कर सकते हैं। लेकिन अगर आप इस परियोजना की सेवा करना चाहते हैं तो आपको सभी संरचित फाइलों को समेटने और बेकार फाइलों से छुटकारा पाने की जरूरत है।

इन फ़ाइलों को एक साथ संयोजित करने के लिए बहुत सारे विकल्प हैं:

• YUI कंप्रेसर
• Google बंद करने वाला कंपाइलर
• सर्वर साइड के लिए (मुझे लगता है कि यह सबसे अच्छा है) जीयूएलपी

Comments

आपको (उद्धरण की आवश्यकता नहीं) सर्वर पर फ़ाइलों को एक साथ मिलाना चाहिए। अधिक से अधिक, मैं एक ट्रांसपिलर का उपयोग करूंगा।

— दान पेंट्री

@ डैनपैंट्री ट्रांसपैरर्स स्रोत-से-स्रोत कंपाइलर हैं। मुझे लगता है कि वे केवल "X" को "JS" में बदल सकते हैं। फ़ाइल मायने रखता है।

— तूफान

..हाँ, लेकिन मुझे आपकी बात पर यकीन नहीं है। मेरा कहना है कि आपको संभवतः सर्वर कोड (फाइलों को संक्षिप्त करके और इस प्रकार फ़ाइल का आकार कम करके) को छोटा करने की कोशिश नहीं करनी चाहिए। यदि आप रक्तस्राव जैसी सुविधाओं का उपयोग कर रहे हैं तो आपको अपने कोड पर बैबल का उपयोग करना चाहिए।

— डैन पेंट्री

@DanPantry मैं आपसे सहमत हूँ। लेकिन टिप्पणियों पर प्रश्नकर्ता कहता है "क्योंकि मेरी तैनाती (Google ऐप इंजन) केवल 10K फ़ाइलों की अनुमति देता है"। इन स्थितियों में हमें फ़ाइल काउंट को छोटा करने की आवश्यकता है।

— तूफान

मैं आपसे सहमत हूँ, लेकिन ओपी को लगता है कि XY मुद्दा यहाँ है

— Dan Pantry

Answer 4

जैसा कि कई लोगों ने पहले ही उल्लेख किया है: आपके नोड_मॉडल्स निर्देशिका (पैकेज के लिए एनपीएम स्थान) की सभी फाइलें आपके प्रोजेक्ट निर्भरता (तथाकथित प्रत्यक्ष निर्भरता) का हिस्सा हैं। इसके अतिरिक्त, आपकी निर्भरताओं की अपनी निर्भरताएं भी हो सकती हैं, इत्यादि, आदि (तथाकथित सकर्मक निर्भरताएं)। कई दस हजार फाइलें कुछ खास नहीं हैं।

क्योंकि आपको केवल 10'000 फाइलें (टिप्पणियां देखें) अपलोड करने की अनुमति है, मैं एक बंडल इंजन के साथ जाऊंगा। यह इंजन आपके सभी जावास्क्रिप्ट, सीएसएस, एचटीएमएल, आदि को बंडल करेगा और एक बंडल बना देगा (या यदि आप उन्हें निर्दिष्ट करते हैं तो अधिक)। आपका index.html इस बंडल को लोड करेगा और यही है।

मैं वेबपैक का प्रशंसक हूं, इसलिए मेरा वेबपैक समाधान एक एप्लिकेशन बंडल और एक विक्रेता बंडल बनाएगा (पूर्ण काम करने वाले एप्लिकेशन के लिए यहां देखें https://github.com/swaechter/project-collection/tree/master/web-angular2- उदाहरण ):

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

लाभ:

• पूर्ण बिल्ड लाइन (टीएस लाइनिंग, संकलन, खनन, आदि)
• तैनाती के लिए 3 फाइलें -> केवल कुछ Http अनुरोध

नुकसान:

• उच्च निर्माण समय
• Http 2 परियोजनाओं के लिए सबसे अच्छा समाधान नहीं है (अस्वीकरण देखें)

डिस्क्लेमर: यह Http 1 * के लिए एक अच्छा समाधान है, क्योंकि यह प्रत्येक Http अनुरोध के लिए ओवरहेड को कम करता है। आपके पास केवल अपने index.html और प्रत्येक बंडल के लिए एक अनुरोध है - लेकिन 100 - 200 फ़ाइलों के लिए नहीं। फिलहाल, यही रास्ता तय करना है।

दूसरी ओर, एचटीपी 2, एचटीपी ओवरहेड को कम करने की कोशिश करता है, इसलिए यह एक स्ट्रीम प्रोटोकॉल पर आधारित है। यह स्ट्रीम दोनों दिशाओं (क्लाइंट <-> सर्वर) में संचार करने में सक्षम है और उसी के कारण, एक अधिक बुद्धिमान संसाधन लोडिंग संभव है (आप केवल आवश्यक फ़ाइलों को लोड करते हैं)। स्ट्रीम Http ओवरहेड (कम Http दौर यात्राएं) के बहुत कुछ को समाप्त करता है।

लेकिन यह IPv6 की तरह ही है: इसमें कुछ साल लगेंगे जब तक लोग वास्तव में Http 2 का इस्तेमाल नहीं करेंगे

Comments

हालांकि आवश्यक नहीं है, क्योंकि ओपी ने उल्लेख किया है angular-cliकि पहले से ही एक बंडल (एक ही सुझाए गए वेबपैक) के साथ आता है।

— मट्टारौ

@mdentinho हाँ, अधिक आधुनिक रिलीज़ में। लेकिन 2016 में SystemJS और CLI जाने का रास्ता था (ख़ुशी से हमारे पास अभी

— वेबपैक है

Answer 5

आपको यह सुनिश्चित करने की आवश्यकता है कि आप कोणीय सीएलआई द्वारा उत्पन्न अपनी परियोजना से सिर्फ डिस्टर्ब (वितरण के लिए छोटा) फोल्डर को तैनात कर रहे हैं । यह टूल को आपके स्रोत कोड को लेने की अनुमति देता है और यह निर्भरता है और केवल आपको वही देता है जो आपको अपने एप्लिकेशन को चलाने के लिए चाहिए।

यह कहा जा रहा है कि उत्पादन के संबंध में एंगुलर सीएलआई के साथ एक समस्या थी / है

कल (2 अगस्त, 2016) एक रिलीज किया गया था जिसमें से निर्माण तंत्र बंद ब्रोकोली + systemjs को webpack जो सफलतापूर्वक उत्पादन बनाता है संभालती है।

इन चरणों के आधार पर:

ng new test-project
ng build --prod

मैं एक देख रहा हूँ distके फ़ोल्डर आकार 1.1 एमबी भर में 14 फ़ाइलें यहाँ सूचीबद्ध:

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

नोट वर्तमान में कोणीय क्ली के वेबपैक संस्करण को स्थापित करने के लिए, आपको चलना होगा ...npm install angular-cli@webpack -g

Answer 6

कोणीय में बहुत सारी निर्भरताएं हैं, और सीएलआई का बीटा संस्करण चार गुना अधिक फ़ाइलों को डाउनलोड करता है।

यह है कि एक साधारण परियोजना कैसे बनाई जाएगी कम फाइलें ("केवल" 10K फाइलें) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

Answer 7

ऐसा लगता है कि किसी ने भी यहां वर्णित समय-संकलन का उल्लेख नहीं किया है: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

कोणीय के साथ मेरा अब तक का अनुभव यह है कि AoT लगभग कोई लोडिंग समय के साथ सबसे छोटा बनाता है। और यहां सबसे महत्वपूर्ण सवाल यह है कि आपको उत्पादन के लिए केवल कुछ फाइलों को शिप करने की आवश्यकता है।

ऐसा इसलिए लगता है क्योंकि कोणीय कंपाइलर को उत्पादन बिल्ड के साथ नहीं भेजा जाएगा क्योंकि टेम्प्लेट को "समय से आगे" संकलित किया जाता है। यह आपके HTML टेम्प्लेट मार्कअप को जावास्क्रिप्ट निर्देशों में रूपांतरित करने के लिए बहुत अच्छा है जो मूल HTML में इंजीनियर को उल्टा करना बहुत कठिन होगा।

मैंने एक सरल वीडियो बनाया है जहाँ मैं देव बनाम एओटी बिल्ड में एक कोणीय ऐप के लिए डाउनलोड आकार, फ़ाइलों की संख्या आदि प्रदर्शित करता हूँ - जिसे आप यहाँ देख सकते हैं:

https://youtu.be/ZoZDCgQwnmQ

आपको डेमो के लिए स्रोत कोड यहां मिलेगा:

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

और - जैसा कि अन्य सभी ने यहां कहा - आपके विकास के वातावरण में कई फाइलें होने पर कुछ भी गलत नहीं है। यही कारण है कि यह सभी निर्भरता के साथ है जो कि कोणीय, और कई अन्य आधुनिक रूपरेखाओं के साथ आता है। लेकिन यहां अंतर यह है कि उत्पादन के लिए शिपिंग करते समय आपको इसे कुछ फाइलों में पैक करने में सक्षम होना चाहिए। इसके अलावा, आप इन सभी निर्भरता फ़ाइलों को अपनी गिट रिपॉजिटरी में नहीं चाहते हैं।

Answer 8

यह वास्तव में कोणीय विशिष्ट नहीं है, यह लगभग किसी भी परियोजना के साथ होता है जो अपने टूलींग के लिए NodeJs / npm पारिस्थितिकी तंत्र का उपयोग करता है।

वे प्रोजेक्ट आपके नोड_मॉडल फ़ोल्डर के अंदर हैं, और जो आपके सीधे निर्भरता को चलाने की आवश्यकता है, वे ट्रांजिटिटिव निर्भरता हैं।

नोड इकोसिस्टम मॉड्यूल आमतौर पर छोटे होते हैं, जिसका अर्थ है कि चीजों को खुद विकसित करने के बजाय हम एक मॉड्यूल के रूप में सबसे अधिक आयात करने की आवश्यकता रखते हैं। इसमें प्रसिद्ध लेफ्ट-पैड फ़ंक्शन जैसी छोटी चीजें शामिल हो सकती हैं, व्यायाम के रूप में नहीं तो खुद को क्यों लिखें?

तो बहुत सारी फाइलें होने के कारण वास्तव में यह एक अच्छी बात है, इसका मतलब है कि सब कुछ बहुत मॉड्यूलर है और मॉड्यूल लेखक अक्सर अन्य मॉड्यूल का पुन: उपयोग करते हैं। न्यूनाधिकता की यह आसानी शायद एक मुख्य कारण है कि नोड पारिस्थितिकी तंत्र इतनी तेजी से क्यों बढ़ा।

सिद्धांत रूप में यह किसी भी समस्या का कारण नहीं होना चाहिए, लेकिन ऐसा लगता है कि आप एक Google ऐप इंजन फ़ाइल गणना सीमा में चलते हैं। उस स्थिति में, मैं सुझाव देता हूं कि ऐप इंजन में नोड_मॉडल अपलोड न करें।

इसके बजाय स्थानीय रूप से एप्लिकेशन का निर्माण करें और Google एप्लिकेशन इंजन पर केवल बंडल की गई फ़ाइलों को अपलोड करें लेकिन ऐप इंजन में ही निर्माण न करें।

Answer 9

यदि आप कोणीय क्ली के नए संस्करण का उपयोग कर रहे हैं ng build --prod

यह पैदा करेगा जिले फोल्डर जिसमें कम फाइलें होंगी और प्रोजेक्ट की गति बढ़ जाएगी।

इसके अलावा कोणीय क्ली के सर्वश्रेष्ठ प्रदर्शन के साथ स्थानीय में परीक्षण के लिए आप उपयोग कर सकते हैं ng serve --prod

Answer 10

यदि आप कोणीय सीएलआई का उपयोग करते हैं तो आप एक परियोजना बनाते समय हमेशा - फ्लैगशिप का उपयोग कर सकते हैं

ng new name --minimal

मैंने अभी इसे झंडे के साथ चलाया है और यह 24 600 फाइलें बनाता है और ng build --prod212 केबी डिस्ट फोल्डर तैयार करता है

इसलिए अगर आपको अपनी परियोजना में पानी के फव्वारे की जरूरत नहीं है या बस जल्दी से कुछ परीक्षण करना चाहते हैं तो मुझे लगता है कि यह बहुत उपयोगी है

Answer 11

कोणीय cli के साथ हाल ही में एक नया प्रोजेक्ट बनाना और नोड_मॉडल फ़ोल्डर 270 एमबीबी था, इसलिए हाँ यह सामान्य है लेकिन मुझे यकीन है कि कोणीय दुनिया के सबसे नए देवता इस पर सवाल उठाते हैं और यह मान्य है। एक सरल नई परियोजना के लिए यह निर्भरता को थोड़ा कम करने के लिए समझ में आता है;) यह नहीं जानते हुए कि सभी पैकेज क्या निर्भर करते हैं, विशेष रूप से पहली बार क्ली को बाहर करने की कोशिश कर रहे नए देवों के लिए थोड़ा अनावश्यक हो सकता है। इस तथ्य में जोड़ें कि ज्यादातर बुनियादी ट्यूटोरियल केवल निर्यात की गई फाइलों को प्राप्त करने के लिए तैनाती सेटिंग्स पर चर्चा नहीं करते हैं। मुझे विश्वास नहीं है कि कोणीय आधिकारिक वेबसाइट पर पेश किए गए ट्यूटोरियल सरल प्रोजेक्ट को कैसे लागू करें, इस बारे में बात करते हैं।

Answer 12

यहाँ इस बात की तुलना है कि कोणीय परियोजनाओं में अधिक स्थान क्या है।

Answer 13

यदि आपका फ़ाइल सिस्टम प्रतीकात्मक लिंक का समर्थन करता है, तो आप कम से कम इन सभी फ़ाइलों को एक छिपे हुए फ़ोल्डर में फिर से जमा कर सकते हैं - ताकि कोई स्मार्ट उपकरण treeउन्हें डिफ़ॉल्ट रूप से प्रदर्शित न करे।

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

इसके लिए एक छिपे हुए फ़ोल्डर का उपयोग करने से यह समझने में भी प्रोत्साहन मिल सकता है कि ये बिल्ड-इन-इंटरमीडिएट फाइलें हैं जिन्हें नियंत्रण में संशोधन के लिए सहेजने की आवश्यकता नहीं है - या सीधे आपकी तैनाती में उपयोग किया जाता है।

Comments

मेरा ब्रेडक्रम्ब बासी हो गया है, लेकिन यहाँ इसका क्या अर्थ है: web.archive.org/web/20150216184318/https://docs.npmjs.com/misc/…

— nobar

Answer 14

कुछ भी गलत नहीं है। ये सभी नोड निर्भरताएँ हैं जिनका आपने पैकेज में उल्लेख किया है।

बस सावधान रहें यदि आपने कुछ git हब प्रोजेक्ट डाउनलोड किया है, तो इसमें बहुत सी अन्य निर्भरताएँ हो सकती हैं, जिन्हें वास्तव में कोणीय 2 पहले हैलो वर्ल्ड ऐप की आवश्यकता नहीं है :)

• सुनिश्चित करें कि आपके पास कोणीय निर्भरता है -rxjs -gulp -typescript -tslint -docker