javascript - tutorial - প্রতিটি কৌণিক প্রকল্পের জন্য বিশাল আকারের ফাইল তৈরি করা হয়




react js (10)

আমি কৌণিকের জন্য একটি সাধারণ হ্যালো ওয়ার্ল্ড অ্যাপ্লিকেশন শুরু করতে চেয়েছিলাম।

আমি যখন অফিসিয়াল quickstart নির্দেশাবলী অনুসরণ করি তখন ইনস্টলেশনটি আমার প্রকল্পে 32,000 ফাইল তৈরি করেছে।

আমি বুঝতে পেরেছি এটি কিছু ভুল বা আমি কিছু মিস করেছি, তাই আমি angular-cli ব্যবহার করার সিদ্ধান্ত নিয়েছি, তবে প্রকল্পটি স্থাপনের পরে আমি 41,000 ফাইল গণনা করেছি।

আমি ভুল হয়ে যেতে পারে যেখানে? আমি কি সত্যিই সুস্পষ্ট কিছু মিস করছি?


আপনাকে নিশ্চিত করতে হবে যে আপনি কৌনিক angular-cli দ্বারা উত্পন্ন আপনার প্রকল্প থেকে কেবলমাত্র (বিতরণের জন্য সংক্ষিপ্ত) ফোল্ডার স্থাপন করছেন। এটি সরঞ্জামটিকে আপনার উত্স কোড এবং এটি নির্ভরতা নিতে দেয় এবং আপনার অ্যাপ্লিকেশনটি চালানোর জন্য আপনাকে যা প্রয়োজন তা কেবল আপনাকে দেয় give

বলা হচ্ছে যে / ng বিল্ড - প্রোডের মাধ্যমে প্রোডাকশন বিল্ডের ক্ষেত্রে কৌণিক সিএলআইয়ের সাথে একটি সমস্যা আছে / ছিল

গতকাল (২ আগস্ট, systemjs )) একটি রিলিজ করা হয়েছিল যা broccoli + systemjs থেকে webpack বিল্ড প্রক্রিয়াটি পরিবর্তন করে যা উত্পাদন বিল্ডগুলি সফলভাবে পরিচালনা করে।

এই পদক্ষেপের উপর ভিত্তি করে:

ng new test-project
ng build --prod

আমি এখানে তালিকাভুক্ত 14 টি ফাইল জুড়ে 1.1 মেগাবাইটের একটি dist ফোল্ডারটি দেখছি:

./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 [email protected] -g


আপনার বিকাশের কনফিগারেশনে কোনও ভুল নেই।

আপনার উত্পাদন কনফিগারেশন কিছু ভুল।

আপনি যখন একটি "কৌণিক 2 প্রকল্প" বা "কোনও প্রকল্প যা জেএস ভিত্তিক" বিকাশ করে আপনি সমস্ত ফাইল ব্যবহার করতে পারেন, আপনি সমস্ত ফাইল চেষ্টা করতে পারেন, আপনি সমস্ত ফাইল আমদানি করতে পারেন। তবে আপনি যদি এই প্রকল্পটি পরিবেশন করতে চান তবে আপনাকে সমস্ত কাঠামোগত ফাইল একত্রিত করতে হবে এবং অকেজো ফাইলগুলি থেকে মুক্তি পেতে হবে।

এই ফাইলগুলিকে একত্রিত করার জন্য প্রচুর বিকল্প রয়েছে:


আপনি যদি কৌণিক ng build --prod নতুন সংস্করণ ব্যবহার করছেন তবে ng build --prod ব্যবহার করুন

এটি ডিস ফোল্ডার তৈরি করবে যাতে কম ফাইল রয়েছে এবং প্রকল্পের গতি বৃদ্ধি পাবে।

এছাড়াও কৌণিক ng serve --prod সেরা পারফরম্যান্স সহ স্থানীয়ভাবে পরীক্ষার জন্য আপনি ng serve --prod ব্যবহার করতে পারেন


আপনি যদি কৌনিক সিএলআই ব্যবহার করেন আপনি যখন কোনও প্রকল্প তৈরি করেন আপনি সর্বদা - সর্বনিম্ন পতাকা ব্যবহার করতে পারেন

ng new name --minimal

আমি এটি কেবল পতাকা দিয়ে ng build --prod এবং এটি 24 600 ফাইল তৈরি করে এবং ng build --prod 212 কেবি ng build --prod ফোল্ডার তৈরি করে

সুতরাং যদি আপনার প্রকল্পে জলের ফোয়ারাগুলির প্রয়োজন না হয় বা দ্রুত কিছু পরীক্ষা করে দেখতে চান তবে আমি মনে করি এটি বেশ দরকারী


কৌণিক নিজে থেকেই প্রচুর নির্ভরতা রয়েছে এবং সিএলআইয়ের বিটা সংস্করণ চারগুণ বেশি ফাইল ডাউনলোড করে।

এটি কীভাবে একটি সহজ প্রকল্প তৈরি করা যায় ফাইলগুলি ("কেবল" 10K ফাইলগুলি) কমবে https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/


কৌণিক প্রকল্পগুলিতে কী বেশি জায়গা নেয় তার একটি তুলনা এখানে দেওয়া হয়েছে।


বেশ কয়েকটি ব্যক্তি ইতিমধ্যে উল্লিখিত হিসাবে: আপনার নোড_মডিউল ডিরেক্টরি ডিরেক্টরি (প্যাকেজগুলির জন্য এনপিএম অবস্থান) এর সমস্ত ফাইলগুলি আপনার প্রকল্প নির্ভরতার (তথাকথিত প্রত্যক্ষ নির্ভরতা) অংশ। এটির সংযোজন হিসাবে, আপনার নির্ভরতাগুলির নিজস্ব নিজস্ব নির্ভরতা ইত্যাদি থাকতে পারে ইত্যাদি So তথাকথিত ট্রানজিটিভ নির্ভরতা)। বেশ কয়েকটি দশ হাজার ফাইল বিশেষ কিছু নয়।

আপনাকে কেবল 10'000 ফাইল আপলোড করার অনুমতি দেওয়া হয়েছে (মন্তব্য দেখুন), তাই আমি একটি বান্ডলার ইঞ্জিন নিয়ে যেতে চাই with এই ইঞ্জিনটি আপনার সমস্ত জাভাস্ক্রিপ্ট, সিএসএস, এইচটিএমএল ইত্যাদি বান্ডিল করবে এবং একটি একক বান্ডিল তৈরি করবে (বা যদি আপনি সেগুলি নির্দিষ্ট করে থাকেন তবে)। আপনার সূচি 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 টি ফাইল -> কেবলমাত্র কয়েকটি এইচটিপিপি অনুরোধ

অসুবিধা:

  • উচ্চ বিল্ড সময়
  • এইচটিটিপি 2 প্রকল্পের জন্য সেরা সমাধান নয় (অস্বীকৃতি দেখুন)

দাবি অস্বীকার: এটি এইচটিটিপি ১ এর জন্য একটি ভাল সমাধান * * কারণ এটি প্রতিটি এইচটিটিপি অনুরোধের জন্য ওভারহেডকে ছোট করে দেয়। আপনার কাছে কেবল আপনার সূচিপত্রের জন্য একটি অনুরোধ আছে html এবং প্রতিটি বান্ডিল - তবে 100 - 200 ফাইলের জন্য নয়। এই মুহুর্তে, এই পথে যেতে হবে।

অন্যদিকে, এইচটিটিপি 2, এইচটিটিপি ওভারহেডকে ছোট করার চেষ্টা করে, তাই এটি স্ট্রিম প্রোটোকলের উপর ভিত্তি করে। এই স্ট্রিমটি উভয় দিকেই (ক্লায়েন্ট <--> সার্ভার) যোগাযোগ করতে সক্ষম এবং এর কারণ হিসাবে আরও বুদ্ধিমান রিসোর্স লোড করা সম্ভব (আপনি কেবলমাত্র প্রয়োজনীয় ফাইলগুলি লোড করুন)। স্ট্রিমটি এইচটিটিপি ওভারহেডের অনেকগুলি (কম এইচটিপিপি রাউন্ড ট্রিপস) সরিয়ে দেয়।

তবে এটি আইপিভি 6 এর মতোই: লোকেরা সত্যিই এইচটিপিপি 2 ব্যবহার না করা পর্যন্ত কয়েক বছর সময় লাগবে


ভুল কিছুই নেই. এই সমস্ত নোড নির্ভরতা যা আপনি প্যাকেজ.জসনে উল্লেখ করেছেন।

আপনি যদি গিট হাব প্রকল্পের কিছু ডাউনলোড করে থাকেন তবে খুব সাবধান থাকুন, এতে অন্যান্য অনেক নির্ভরতা থাকতে পারে যা আসলে কৌনিক 2 প্রথম হ্যালো ওয়ার্ল্ড অ্যাপের জন্য প্রয়োজন হয় না :)

  • আপনার কৌণিক নির্ভরতা রয়েছে কিনা তা নিশ্চিত করুন-rxjs-gulp-typype -tslint -docker

সম্প্রতি কৌণিক ক্লিমে একটি নতুন প্রকল্প তৈরি করা হয়েছে এবং নোড_মডিউলগুলি ফোল্ডারটি ছিল ২00 এমবি, সুতরাং হ্যাঁ এটি স্বাভাবিক তবে আমি নিশ্চিত যে কৌণিক বিশ্বের সবচেয়ে নতুন ডিভাস এটি বৈধ এবং বৈধ। একটি সহজ নতুন প্রকল্পের জন্য এটি নির্ভরতা কিছুটা কমিয়ে আনার অর্থ হবে;) সমস্ত প্যাকেজগুলি কী নির্ভর করে তা বিশেষত নতুন দেবগণের জন্য প্রথমবারের মতো ক্লাইটি চেষ্টা করার চেষ্টা করা কিছুটা উদ্বেগজনক হতে পারে। কেবলমাত্র রফতানি হওয়া ফাইলগুলি পেতে বেশিরভাগ বেসিক টিউটোরিয়ালগুলি মোতায়েনের সেটিংস নিয়ে আলোচনা করে না। আমিও বিশ্বাস করি না এমনকি কৌনিক অফিসিয়াল ওয়েবসাইটে দেওয়া টিউটোরিয়ালটি কীভাবে সহজ প্রকল্পটি স্থাপন করা যায় সে সম্পর্কে আলোচনা করে।


                                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

[ বান্ডিলিং প্রক্রিয়াটির জন্য এটি দেখুন ⇗ ]





angular