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

jquery (10)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://youtu.be/ZoZDCgQwnmQ

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

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

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

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

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

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

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

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

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

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

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

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 का इस्तेमाल नहीं करेंगे

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

ng new name --minimal

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

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

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

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

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

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

                                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 ]