কেন রিএ্যাক্টের ফাইলসাইজ তার ছোট এপিআই দেওয়া এত বড়?


88

এখানে নম্বর আছে

  • মিনিট + জিজিপ 26 কে
  • gzip 90k
  • আসল 450 + কে

এবং প্রতিক্রিয়াটির ডকুমেন্টেশনে অনেকগুলি বৈশিষ্ট্য নেই। এত বড় কেন?

আমার মনে হচ্ছে এটি হালকা ওজনের ডোম বাস্তবায়ন the তবে আমি নিশ্চিত হতে চাই


4
আপনি উত্সটি একবার দেখেছেন, এটি কী করে তা দেখতে? সহায়ক টিপ, সংশোধিত সংস্করণটি তাকান না।
মিস্টার লিস্টার

6
আমি কোডে ডাইভিংয়ের আগে জিজ্ঞাসা করার সিদ্ধান্ত নিয়েছি। যদিও আমি প্রতিক্রিয়া ব্যবহার করার পরিকল্পনা করছি আমি যেভাবেই হোক সেখানে ডুব দিয়ে যাব;)
এলদার জাজাফভ

4
26 কে মোটেও বড় নয় ..
বিটি

লোকেরা বলছেন প্রতিক্রিয়া বড় নয়। হ্যাঁ, রিএ্যাকটিজগুলি নিজেই খুব ছোট (সংস্করণ 16.1.1 এর 6.41KB) তবে মনে রাখবেন যে প্রতিক্রিয়াটির কাজ করার জন্য একটি রিঅ্যাক্টডম প্রয়োজন হয় এবং রিঅ্যাক্টডোমের আকার 92.4KB থাকে
দিনহ ট্রান

উত্তর:


187

প্রতিক্রিয়া বেশ কিছুটা করে! প্রতিক্রিয়াটির সবচেয়ে বড় অজ্ঞাতসংশ্লিষ্ট অংশ সম্ভবত ইভেন্টগুলি সিস্টেম - প্রতিক্রিয়া কেবল তার নিজস্ব ইভেন্ট প্রেরণ এবং বুদবুদকে বাস্তবায়িত করে না, এটি ব্রাউজারগুলিতে সাধারণ ঘটনাগুলিকে স্বাভাবিক করে তোলে যাতে আপনাকে এ নিয়ে বেশি চিন্তা করার প্রয়োজন নেই। উদাহরণস্বরূপ, সিলেক্টেভেন্টপ্লাগিন একটি অন্তর্নির্মিত ইভেন্ট "প্লাগইন" যা একটি সরবরাহ করেonSelect ইভেন্ট সরবরাহ করে যা সমস্ত ব্রাউজারে একইভাবে আচরণ করে।

ভার্চুয়াল করে DOM বাস্তবায়ন পাশাপাশি কোডের একটি শালীন পরিমাণ গ্রহণ করা আছে; পারফরম্যান্স অপটিমাইজেশনের জন্য প্রচুর প্রচেষ্টা ব্যয় করা হয়, এ কারণেই আনমিনিফাইড সংস্করণে রি্যাক্টসার্ফ অন্তর্ভুক্ত রয়েছে যা রেন্ডারিং পারফরম্যান্স পরিমাপের জন্য একটি সরঞ্জাম। ডিওএম আপডেট করার সময়, প্রতিক্রিয়া আপনার জন্য কিছু সুবিধাজনক জিনিসও করে যেমন কোনও ইনপুট নির্বাচন বজায় রাখা এবং বর্তমান স্ক্রোলের অবস্থান একই রাখা।

প্রতিক্রিয়াটির হাতটি আরও কয়েকটি কৌশল রয়েছে। সর্বোত্তম একটি হ'ল এটি আপনার ব্রাউজারের পরিবেশ না থাকলেও এটি এইচটিএমএল স্ট্রিংয়ের একটি উপাদানকে সম্পূর্ণরূপে সমর্থন করে, যাতে আপনি জেএস লোড হওয়ার আগে কাজ করে এমন একটি পৃষ্ঠা নীচে পাঠাতে পারেন।


আপনি কিসের বিরুদ্ধে প্রতিক্রিয়া তুলনা করছেন? react-15.0.2.min.jsহয় 43k (gzipped), তবে jQuery 33k যখন ember-2.6.0.prod.jsহয়363k (also gzipped) । স্পষ্টতই এই ফ্রেমওয়ার্কগুলি ঠিক একই জিনিসগুলি করে না তবে এগুলিতে প্রচুর ওভারল্যাপ থাকে তাই আমি তুলনাটি যুক্তিসঙ্গত বলে মনে করি।

আপনি যদি ডাউনলোডের আকার সম্পর্কে উদ্বিগ্ন হন তবে জেএস কোড এতে অবদান রাখার বিষয়ে আমি খুব বেশি চিন্তা করব না। এখানে এখনই আমার বিজ্ঞাপন স্ট্যাক ওভারফ্লো পৃষ্ঠার ডানদিকে দেখতে পাচ্ছি এমন একটি বিজ্ঞাপন:

এটির ডাউনলোডের আকার 95 কে - আমি কোনও পৃষ্ঠায় এর মতো চিত্র অন্তর্ভুক্ত করার বিষয়ে দু'বার চিন্তা করব না কারণ (যদিও আমি পারফরম্যান্স নিয়ে চিন্তিত ছিলাম) সাধারণত আরও অনেকগুলি পারফরম্যান্স-সম্পর্কিত জিনিস ঠিক করার জন্য রয়েছে যা আরও লাভজনক।


সংক্ষেপে, আমি মনে করি না যে প্রতিক্রিয়াটি এত বড় এবং এটির আকারটি যা আপনাকে দেয় সেগুলি অনেকগুলি ছোট জিনিস থেকে আসে help আপনি প্রতিক্রিয়াটির ছোট এপিআইকে একটি কারণ হিসাবে উদ্ধৃত করেছেন যে রিএ্যাক্টের কোডটি ছোট হওয়া উচিত, তবে এর চেয়ে আরও ভাল প্রশ্ন হতে পারে, "রিএ্যাক্টের এপিআই আপনার পক্ষে যা কিছু করে তা সব কিছু দিয়ে কীভাবে এত সহজ হতে সক্ষম?"

… তবে এটি সম্পূর্ণ আলাদা প্রশ্ন। :) আশা করি আমি আপনার প্রশ্নের উত্তর দিয়েছি - আমি না দিলে প্রসারণ করতে পেরে খুশি।


4
আপনি আমার প্রশ্নের পুরো উত্তর দিয়েছেন। প্রতিক্রিয়া দুর্দান্ত। আমি মোবাইলের জন্য এটি ব্যবহার করার কথা ভাবছি তাই আকারটি গুরুত্বপূর্ণ। এটি ঠিক কী করে তা প্রায় খুব বেশি তথ্য নেই। এবং আমি ভাবছি যে আরও বেশি কৌশল আমি ব্যবহার করতে পারি: :) আমি মনে করি যে আমি jquery জিনিস থেকে মুক্তি পেতে পারি। এবং পলমিলার / এক্সোস্কেলটন ঠিক সময়েই আছে :)
এল্ডার জাজফরভ

4
আমি অ্যাপ বিল্ডিংয়ের সম্পূর্ণ ভিন্ন ধারণা খনন করছি। পরীক্ষা করে দেখুন vimeo.com/78151404 এবং github.com/component/component - আপনি যাদের jsxtransformations সঙ্গে সব এবং compy নাটক চমৎকার এ jQuery এর যার ফলে না ব্যবহার করে। এবং প্রতিক্রিয়া সবচেয়ে কঠিন কাজ করে - অন্য সব কিছু (মডেল, রাউটিং, সার্ভার যোগাযোগ) মাইক্রোকম্পোনেন্ট দ্বারা আচ্ছাদিত হতে পারে।
এলদার জাজাফরভ

30
দ্রষ্টব্য, আমরা ফেসবুকের মোবাইল ওয়েবসাইটে প্রতিক্রিয়া ব্যবহার করছি যেখানে আকারটি অত্যন্ত অত্যন্ত গুরুত্বপূর্ণ :)
ভিজেক্স

4
@ লাইটব্লেড উম ... নাহ মেমরির ব্যবহার আপনার কোড কত বরাদ্দ দেয় তার উপর নির্ভর করে। প্রতিক্রিয়া বরাদ্দ এড়াতে খুব চেষ্টা করে।
ড্যান আব্রামভ

4
@ ১ এনফিনিটি ঠিক আছে, আড়াই বছর হয়ে যাওয়ার পরে কিছু নতুন সংখ্যার সাথে আপডেট হয়েছে।
সোফি আল্পার্ট

-1

কয়েকটা চিন্তাভাবনা .. এর আকার নিয়ে আমার কিছুটা একই উদ্বেগ ছিল তবে এটি ব্যবহার করার পরে, কোনও রসিকতা নেই, আমি এটি 5MB আকারের হলে ব্যবহার করব। এটা ঠিক যে ভাল। এটি বলেছিল, আমি অন্যান্য লাইব্রেরিতে যতটা সম্ভব নির্ভরতা হ্রাস করার সিদ্ধান্ত নিয়েছি। আমি দুটি জিনিসের জন্য jquery ব্যবহার করছিলাম .. এজ্যাক্স এবং স্বয়ংক্রিয় এজাক্স প্রতিক্রিয়া এবং অনুরোধ পরিচালনা (অনুরোধ আগে) পাঠানো হবে যা লগইন করার পরে কোনও টোকেন প্রতিক্রিয়া জানাতে সক্ষম হয়েছিল এবং তারপরে নিশ্চিত হয়ে নিন যে প্রতিটি এজ্যাক্স অনুরোধ এটির আগে অনুমোদনের শিরোনামে যুক্ত করেছিল? প্রেরণ আমি এটিকে দেশীয় জাভাস্ক্রিপ্টের একটি দুর্দান্ত ছোট্ট বিট দিয়ে প্রতিস্থাপন করেছি। দুর্দান্ত কাজ করে। এছাড়াও, আমি_উন্ডসর ব্যবহার করার চেষ্টা করছিলাম। আমি এটিকে লোডাসের সাথে প্রতিস্থাপন করেছি, যা আরও ছোট এবং দ্রুত, যদিও বর্তমানে আমি এটি ব্যবহার করছি না তাই এটি একেবারে মুছে ফেলতে পারে।

গুগলে অনেকের একটি নিবন্ধ এখানে আমি পেয়েছি যে jquery ওভার নেটিভ জেএস ব্যবহার করে কিছু বিকল্প আছে।

http://www.sitepPoint.com/jquery-vs-raw-javascript-1-dom-forms/


4
আপনি একাধিক ব্রাউজারকে লক্ষ্য করে রাখলে আপনি যে টুকরা ব্যবহার করেন সেগুলি দিয়ে আপনি কেবল jQuery এর একটি কাস্টম সংস্করণ তৈরি করতে পারেন
ড্যান হবারডেন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.