آپ سب کو جاوا اسکرپٹ کوڈ تقسیم کرنے کے بارے میں جاننے کی ضرورت ہے

جدید سائٹس اکثر ان کے تمام جاوا اسکرپٹ کو ایک ہی، بڑے میں جمع کرتے ہیں main.js. سکرپٹ. یہ باقاعدگی سے آپ کے تمام صفحات یا راستوں کے لئے سکرپٹ پر مشتمل ہے، یہاں تک کہ اگر صارفین کو صرف اس صفحے کے لئے ایک چھوٹا سا حصہ کی ضرورت ہوتی ہے تو وہ دیکھ رہے ہیں.

جب جاوا اسکرپٹ اس طرح کی خدمت کرتے ہیں تو، آپ کے ویب صفحات کی لوڈنگ کی کارکردگی کا سامنا کرنا پڑتا ہے - خاص طور پر ذمہ دار ویب ڈیزائن موبائل آلات پر. تو ہم جاوا اسکرپٹ کوڈ تقسیم کرنے کے ذریعے اسے ٹھیک کریں.

• کس طرح تیزی سے کوڈ، ہلکا جاوا اسکرپٹ

کوڈ تقسیم کرنے کا کیا مسئلہ ہے؟

جب ایک ویب براؤزر اے دیکھتا ہے & lt؛ سکرپٹ اور جی ٹی؛ جاوا اسکرپٹ آپ حوالہ دینے والے جاوا اسکرپٹ کو پروسیسنگ اور پروسیسنگ کرنے کی ضرورت ہے. یہ اعلی کے آخر میں آلات پر تیزی سے محسوس کر سکتا ہے لیکن غیر استعمال شدہ جاوا اسکرپٹ کوڈ پر عملدرآمد اور عمل کرنے اور عمل کرنے کے لئے ایک سست نیٹ ورک اور سست CPU کے ساتھ اوسط موبائل آلات پر تھوڑی دیر لگ سکتا ہے. اگر آپ کو کافی شاپنگ یا ہوٹل وائی فائی پر لاگ ان کرنا پڑا ہے، تو آپ جانتے ہیں کہ سست نیٹ ورک کے تجربات ہر ایک کے ساتھ ہوسکتے ہیں.

ہر دوسرے نے جاوا اسکرپٹ کو ختم کرنے کے لئے انتظار کر کے خرچ کرنے کے لئے خرچ کر سکتے ہیں، آپ کے تجربے کے ساتھ کس طرح جلد ہی صارفین کو بات چیت کرنے میں مدد مل سکتی ہے. یہ خاص طور پر یہ معاملہ ہے اگر آپ کے UX جے ایس پر اہم اجزاء کے لئے یا اس سے بھی ایونٹ کے سادہ ٹکڑے ٹکڑے کے لئے ایونٹ ہینڈلرز کو بھی منسلک کرتے ہیں.

کیا مجھے کوڈ تقسیم کرنے کے ساتھ پریشان کرنے کی ضرورت ہے؟

یہ یقینی طور پر اپنے آپ سے پوچھ رہا ہے کہ آیا آپ کو کوڈ تقسیم کرنے کی ضرورت ہے (اگر آپ نے ایک سادہ استعمال کیا ہے ویب سائٹ بلڈر آپ شاید نہیں کرتے). اگر آپ کی سائٹ انٹرایکٹو مواد کے لئے جاوا اسکرپٹ کی ضرورت ہوتی ہے (مینو دراز اور کاروسیل جیسے خصوصیات کے لئے یا یوآئ کو فراہم کرنے کے لئے جاوا اسکرپٹ فریم ورک پر انحصار کرنے والے ایک صفحے کی درخواست ہے، تو جواب کا امکان ہے 'ہاں'. چاہے آپ کی ویب سائٹ کے لئے کوڈ تقسیم کرنا قابل قدر ہے تو آپ کو اپنے آپ کو جواب دینے کی ضرورت ہوگی. آپ اپنی فن تعمیر کو سمجھتے ہیں اور آپ کی سائٹ کس طرح بہتر بناتی ہے. شکر ہے کہ یہاں آپ کی مدد کرنے کے لئے دستیاب اوزار موجود ہیں. یاد رکھیں کہ اگر آپ اپنے ڈیزائن کے نظام میں تبدیلیوں کو لاگو کر رہے ہیں تو، آپ کے مشترکہ میں ان تبدیلیوں کو محفوظ کریں کلاؤڈ اسٹوریج تو آپ کی ٹیم دیکھ سکتی ہے.

مدد حاصل کرو

جاوا اسکرپٹ کوڈ تقسیم کرنے کے لئے ان کے لئے، لائٹ ہاؤس - کروم ڈویلپر ٹولز میں آڈٹ پینل - اس پر روشنی چمکنے میں مدد مل سکتی ہے کہ آیا یہ آپ کی سائٹ کے لئے ایک مسئلہ ہے. آڈٹ آپ کو تلاش کرنا چاہتے ہیں جاوا اسکرپٹ عملدرآمد کے وقت کو کم کرنا (دستاویزی یہاں ). یہ آڈٹ آپ کے صفحے پر تمام سکرپٹ پر روشنی ڈالتا ہے جو اس کے ساتھ بات چیت کرنے والے صارف کو تاخیر کر سکتا ہے.

صفحات اسپیس بصیرت ایک آن لائن آلے ہے جو آپ کی سائٹ کی کارکردگی کو بھی اجاگر کرسکتا ہے - اور کروم صارف کے تجربے کی رپورٹ سے آپ کی ویب سائٹ کی کارکردگی پر لائٹھور اور حقیقی دنیا کے اعداد و شمار سے لیب کے اعداد و شمار پر مشتمل ہے. تمہارا ویب میزبانی سروس ہو سکتا ہے دوسرے اختیارات.

کروم ڈویلپر ٹولز میں کوڈ کوریج

اگر ایسا لگتا ہے کہ آپ کی مہنگی سکرپٹ موجود ہیں جو بہتر تقسیم ہوسکتے ہیں، اگلے آلے کو کروم ڈویلپر کے اوزار میں کوڈ کی کوریج کی خصوصیت ہے (DevTools اور GT؛ اوپر دائیں مینو اور GT؛ زیادہ اوزار اور جی ٹی؛ کوریج). یہ اقدامات آپ کے صفحے میں کتنا غیر استعمال شدہ جاوا اسکرپٹ (اور سی ایس ایس) ہے. ہر اسکرپٹ کے لئے خلاصہ کے لئے، Devtools 'غیر استعمال شدہ بائٹس' دکھایا جائے گا. یہ کوڈ ہے جب آپ صارف کو اس کی ضرورت ہوتی ہے تو آپ کو تقسیم کرنے اور سست لوڈنگ پر غور کر سکتے ہیں.

مختلف قسم کے کوڈ تقسیم

جب آپ کو کوڈ تقسیم کرنے والے جاوا اسکرپٹ میں آتا ہے تو آپ کچھ مختلف نقطہ نظر ہیں. آپ کی سائٹ پر یہ کتنا اطلاق ہوتا ہے اس پر منحصر ہے کہ آپ صفحہ / درخواست 'منطق' کو تقسیم کرنا چاہتے ہیں یا دوسرے 'وینڈرز' سے لائبریریوں / فریم ورک کو تقسیم کرنا چاہتے ہیں.

متحرک کوڈ تقسیم: ہم میں سے بہت سے 'مستحکم' درآمد جاوا اسکرپٹ ماڈیولز اور انحصار ہیں تاکہ وہ تعمیر وقت میں ایک فائل میں ایک دوسرے کے ساتھ بنڈل بنائے جائیں. 'متحرک' کوڈ تقسیم کرنے میں آپ کے جاوا اسکرپٹ میں پوائنٹس کی وضاحت کرنے کی صلاحیت میں اضافہ ہوتا ہے کہ آپ کو ضرورت کے مطابق تقسیم اور سست لوڈ کرنا چاہیں گے. جدید جاوا اسکرپٹ متحرک کا استعمال کرتا ہے درآمد () اسے حاصل کرنے کے لئے بیان. ہم اس سے زیادہ جلد ہی احاطہ کریں گے.

وینڈر کوڈ تقسیم: فریم ورک اور لائبریریوں پر آپ انحصار کرتے ہیں (مثال کے طور پر ردعمل، کونیی، ویو یا لودش) سکرپٹ میں تبدیل کرنے کے قابل نہیں ہیں جو آپ اپنے صارفین کو بھیجتے ہیں، اکثر آپ کی ویب سائٹ کے لئے 'منطق' کے طور پر. آپ کی سائٹ پر واپس آنے والے صارفین کے لئے کیش کی غلطی کے منفی اثرات کو کم کرنے کے لئے، آپ اپنے 'فروش' کو علیحدہ سکرپٹ میں تقسیم کر سکتے ہیں.

داخلہ پوائنٹ کوڈ تقسیم: اندراج آپ کی سائٹ یا ایپ میں پوائنٹس شروع کررہے ہیں کہ ویب پیپ کی طرح ایک آلہ آپ کے انحصار کے درخت کی تعمیر کے لئے دیکھ سکتے ہیں. اندراجات کی طرف سے تقسیم کردہ صفحات کے لئے مفید ہے جہاں کلائنٹ سائڈ روٹنگ استعمال نہیں کیا جاتا ہے یا آپ سرور اور کلائنٹ سائڈ رینڈرنگ کے ایک مجموعہ پر انحصار کر رہے ہیں.

اس مضمون میں ہمارے مقاصد کے لئے، ہم متحرک کوڈ تقسیم کرنے پر توجہ مرکوز کریں گے.

کوڈ تقسیم کرنے کے ساتھ ہاتھ حاصل کریں

آئیے کی جاوا اسکرپٹ کی کارکردگی کو بہتر بنانے دو سادہ درخواست جس میں تین نمبروں کی طرح ہوتی ہے کوڈ تقسیم کرنے کے ذریعے - یہ میرے ساتھی ہاؤسین ڈیڈیر کی طرف سے ایک اپلی کیشن ہے. کام کے بہاؤ ہم اپنے جاوا اسکرپٹ لوڈ کو فوری طور پر بنانے کے لئے استعمال کریں گے، جلد ہی پیمائش، اصلاح اور نگرانی ہے. یہاں سے شروع کرو .

کارکردگی کی پیمائش

کسی بھی امیدوں کو شامل کرنے کی کوشش کرنے سے پہلے، ہم سب سے پہلے ہمارے جاوا اسکرپٹ کی کارکردگی کی پیمائش کرنے کے لئے جا رہے ہیں. جیسا کہ جادو سنیٹر ایپ گلیچ پر میزبان ہے، ہم اس کے کوڈنگ ماحول کا استعمال کریں گے. یہاں اس کے بارے میں کیسے جانا ہے:

• شو لائیو بٹن پر کلک کریں.
• CMD + اختیار + I / CTRL + SHIFT + I / CTRL + Shift + I / CTRL + Shift + I / CTRL + Shift + I.
• نیٹ ورک پینل کو منتخب کریں.
• یقینی بنائیں کہ غیر فعال کیش چیک کی گئی ہے اور ایپ کو دوبارہ لوڈ کریں.

یہ سادہ درخواست صرف چند نمبروں کے ذریعے ترتیب دینے کے لئے 71.2 KB جاوا اسکرپٹ کا استعمال کرتے ہوئے لگتا ہے. یہ یقینی طور پر صحیح نہیں لگتا ہے. ہمارے ذریعہ میں SRC / index.js. ، لودش افادیت لائبریری درآمد کی جاتی ہے اور ہم استعمال کرتے ہیں ترتیب دیں - اس کی ترتیبات میں سے ایک - ہماری تعداد کو حل کرنے کے لئے. لودش کئی مفید افعال پیش کرتا ہے لیکن اے پی پی صرف اس سے ایک واحد طریقہ استعمال کرتا ہے. یہ ایک عام غلطی ہے کہ تیسری پارٹی کے انحصار کو انسٹال کرنے اور درآمد کرنے کے لئے اصل حقیقت میں آپ کو صرف اس کا ایک چھوٹا حصہ استعمال کرنے کی ضرورت ہے.

اپنی بنڈل کو بہتر بنائیں

ہمارے جاوا اسکرپٹ بنڈل سائز کو trimmming کے لئے دستیاب چند اختیارات ہیں:

1. ایک تہوار کی لائبریری پر انحصار کرنے کے بجائے اپنی مرضی کے مطابق ترتیب کا طریقہ لکھیں.
2. استعمال array.prototype.sort () جو براؤزر میں بنایا گیا ہے.
3. صرف درآمد ترتیب دیں پوری لائبریری کے بجائے لودش سے طریقہ.
4. جب کسی صارف کو اس کی ضرورت ہوتی ہے تو صرف کوڈ کو ڈاؤن لوڈ کریں (جب وہ ایک بٹن پر کلک کریں).

اختیارات 1 اور 2 ہمارے بنڈل سائز کو کم کرنے کے لئے موزوں ہیں - یہ شاید ایک حقیقی درخواست کے لئے احساس بناتے ہیں. تدریس مقاصد کے لئے، ہم کچھ مختلف کوشش کرنے جا رہے ہیں. اختیارات 3 اور 4 درخواست کی کارکردگی کو بہتر بنانے میں مدد.

صرف آپ کی ضرورت کوڈ کو درآمد کریں

ہم صرف ایک ہی درآمد کرنے کے لئے چند فائلوں میں ترمیم کریں گے ترتیب دیں ہم روڈش سے ہمیں ضرورت ہے. چلو ہماری جگہ لے لو لودش انحصار میں پیکیج. json. انکار

"lodash": "^4.7.0",

اس کے ساتھ:

"lodash.sortby": "^4.7.0",

SRC / index.js میں، ہم اس مزید مخصوص ماڈیول درآمد کریں گے:

 جے ایس
درآمد "./style.css"؛
درآمد _ "لودش" سے؛
"lodash.sortby" سے ترتیب دیں؛ 

اگلا، ہم اپ ڈیٹ کریں گے کہ اقدار کس طرح ترتیب دیں گے:

 جے ایس
form.addeventlistener ("جمع کرائیں"، e = & gt؛ {
  e.prepressdefault ()؛
  Const Vales = [infut1.valueasnumber، infut2.valueasnumber، infut3.valueasnumber]؛
  CONST SULTESEDVALUES = _.ortby (اقدار)؛
  COST SCORTEDVALUES = ترتیب (اقدار)؛
  نتائج. innerhtml = `
    & lt؛ h2 & gt؛
      $ {shaneedvalues}
    & lt؛ / h2 & gt؛
  `
})؛ 

جادو نمبر اے پی پی کو دوبارہ لوڈ کریں، ڈویلپر کے اوزار کھولیں اور پھر نیٹ ورک پینل کو دیکھیں. اس مخصوص ایپ کے لئے، ہمارے بنڈل کا سائز تھوڑا سا کام کے ساتھ چار کے پیمانے پر کم کیا گیا تھا. لیکن بہتری کے لئے اب بھی بہت کمرہ ہے.

جاوا اسکرپٹ کوڈ تقسیم

Webpack آج ویب ڈویلپرز کی طرف سے استعمال کیا جاتا سب سے زیادہ مقبول جاوا اسکرپٹ ماڈیول Bundlers میں سے ایک ہے. یہ بنڈل '(یکجا) آپ کے جاوا اسکرپٹ ماڈیولز اور دیگر اثاثوں کو جامد فائلوں میں ویب براؤزر پڑھ سکتے ہیں.

اس درخواست میں واحد بنڈل دو علیحدہ سکرپٹ میں تقسیم کیا جا سکتا ہے:

• ایک کوڈ کے لئے ایک ذمہ دار ہے جو ابتدائی راستے پر تشکیل دیتا ہے.
• ایک اور میں ہمارے چھانٹ کوڈ پر مشتمل ہے.

متحرک درآمدات کا استعمال کرتے ہوئے (کے ساتھ درآمد () مطلوبہ الفاظ)، ایک دوسری سکرپٹ کی طلب پر سست ہو سکتی ہے. ہمارے جادو نمبروں میں اے پی پی میں، کوڈ بناتا ہے جب صارف بٹن پر کلک کرتا ہے تو اس سکرپٹ کو سکرپٹ کی ضرورت ہوتی ہے. ہم ترتیب کے طریقہ کار کے لئے اعلی درجے کی درآمد کو ہٹانے سے شروع کرتے ہیں SRC / index.js. انکار

 "lodash.sortby" سے درآمد کی طرح؛ 

ایونٹ سننے والے کے اندر اندر اسے درآمد کریں کہ جب بٹن پر کلک کیا جاتا ہے:

form.addeventlistener ("جمع کرائیں"، e = & gt؛ {
  e.prepressdefault ()؛
  درآمد ('lodash.sortby')
    .یہ (ماڈیول = & gt؛ ماڈیول. default)
    .یہ (SortInput ())
    .catch (ERR = & GT؛ {انتباہ (ERR)}؛
})؛

یہ متحرک درآمد () خصوصیت ہم استعمال کر رہے ہیں جو جاوا اسکرپٹ زبان کے معیار میں ایک ماڈیول درآمد کرنے کی صلاحیت سمیت ایک معیاری اسٹیک کی تجویز کا حصہ ہے. ویب پیک پہلے ہی اس نحو کی حمایت کرتا ہے. آپ کس طرح متحرک درآمد کام کے بارے میں مزید پڑھ سکتے ہیں اس مضمون میں .

The. درآمد () بیان جب یہ حل کرتا ہے تو ایک وعدہ واپس آتا ہے. WebPock یہ ایک تقسیم نقطہ نظر کے طور پر سمجھتا ہے کہ یہ ایک علیحدہ سکرپٹ (یا چکن) میں توڑ جائے گا. ایک بار ماڈیول واپس آ گیا ہے، ماڈیول. default. فراہم کردہ ڈیفالٹ برآمد کے حوالے سے استعمال کیا جاتا ہے لودش . وعدہ دوسرے کے ساتھ زنجیر ہے .پھر() کال کرنا SortInput تین ان پٹ اقدار کو حل کرنے کا طریقہ. وعدہ چین کے اختتام پر، .catch () ایک غلطی کے نتیجے میں وعدہ کو مسترد کیا جاتا ہے جہاں ہینڈل کرنے کے لئے کہا جاتا ہے.

ایک حقیقی پیداوار ایپلی کیشنز میں، آپ کو مناسب طریقے سے متحرک درآمد کی غلطیوں کو سنبھالنا چاہئے. سادہ انتباہ پیغامات (یہاں استعمال کیا جاتا ہے اسی طرح) کیا استعمال کیا جاتا ہے اور صارفین کو جاننے کے لئے بہترین صارف کا تجربہ فراہم نہیں کرسکتا ہے جو کچھ جانتا ہے.

اگر آپ ایک لامحدود غلطی کی طرح دیکھتے ہیں تو "پیرس کی خرابی: درآمد اور برآمد درآمد اور برآمد صرف اعلی درجے پر ظاہر ہوتا ہے"، یہ معلوم ہے کہ یہ متحرک درآمد نحوط کی وجہ سے ابھی تک حتمی نہیں کیا جا رہا ہے. اگرچہ ویبپپ اس کی حمایت کرتا ہے، اسسٹنٹ کے لئے ترتیبات (ایک جاوا اسکرپٹ لینٹنگ کا آلہ) glitch کی طرف سے استعمال کیا جاتا ہے اس مطابقت کو ابھی تک شامل کرنے کے لئے اپ ڈیٹ نہیں کیا گیا ہے لیکن یہ اب بھی کام کرتا ہے.

آخری چیز ہمیں کرنے کی ضرورت ہے SortInput ہماری فائل کے اختتام پر طریقہ. اس سے ایک فنکشن واپس آنے والی ایک فنکشن ہے جو درآمد شدہ طریقہ میں لیتا ہے lodash.sortby. . نزدیک کام تین ان پٹ اقدار کو ترتیب دے سکتا ہے اور ڈوم کو اپ ڈیٹ کر سکتا ہے:

 COST SANTINUPT = () = & gt؛ {
  واپسی (ترتیب دیں) = & gt؛ {
    قسط = [
      ان پٹ 1.valueasnumber،
      infut2.valueasnumber،
      infut3.valueasnumber.
    ]؛
    COST SCORTEDVALUES = ترتیب (اقدار)؛
    نتائج. innerhtml = `
      & lt؛ h2 & gt؛
        $ {shaneedvalues}
      & lt؛ / h2 & gt؛
    `
  }؛
} 

نمبروں کی نگرانی

اب ہم ایک آخری وقت کی درخواست کو دوبارہ لوڈ کریں اور نیٹ ورک کے پینل پر قریبی آنکھ کو برقرار رکھیں. آپ کو یہ معلوم ہونا چاہئے کہ اے پی پی بوجھ جب ایک چھوٹا سا ابتدائی بنڈل ڈاؤن لوڈ کیا جاتا ہے. بٹن کے بعد ان پٹ نمبروں کو ترتیب دینے کے لئے کلک کیا جاتا ہے، سکرپٹ / چوک مشتمل ہے جس میں چھانٹنے والے کوڈ کو لے لیا اور پھانسی ملتی ہے. کیا آپ دیکھتے ہیں کہ اعداد و شمار اب بھی ترتیب دیں گے کیونکہ ہم ان کی توقع کریں گے؟

جاوا اسکرپٹ کوڈ تقسیم اور سست لوڈنگ آپ کے ایپ یا سائٹ کے ابتدائی بنڈل سائز کو ٹرمنے کے لئے بہت مفید ثابت ہوسکتا ہے. یہ صارفین کے لئے تیزی سے صفحہ بوجھ کے اوقات میں براہ راست نتیجہ بناتا ہے. اگرچہ ہم نے وینیلا جاوا اسکرپٹ ایپلی کیشن میں تقسیم کرنے والے کوڈ کو شامل کیا ہے، آپ اسے لائبریریوں یا فریم ورک کے ساتھ تعمیر کردہ ایپس میں بھی درخواست دے سکتے ہیں.

جاوا اسکرپٹ لائبریری یا فریم ورک کے ساتھ سست لوڈنگ

بہت سے مقبول فریم ورک کی حمایت کرتے ہیں جس میں متحرک درآمد اور ویب پیک کا استعمال کرتے ہوئے کوڈ تقسیم اور سست لوڈنگ شامل کرنا شامل ہے.

یہاں یہ ہے کہ آپ کس طرح ایک فلم 'وضاحت' کے اجزاء کو رد عمل کا استعمال کر سکتے ہیں (اس کے ساتھ reasct.lazy () اور ان کی معطل کی خصوصیت) "لوڈنگ ..." فراہم کرنے کے لئے جب جزو سست ہو رہا ہے (ملاحظہ کریں یہاں کچھ اور تفصیلات کے لئے):

 درآمد ردعمل، {معطل} 'ردعمل' سے؛
CONT تفصیل = react.lazy (() = & gt؛ درآمد ('./ وضاحت')؛
فنکشن ایپ () {
  واپسی (
    & lt؛ div & gt؛
      & lt؛ h1 & gt؛ میری فلم & lt؛ / h1 & gt؛
      & lt؛ suspense fallback = "لوڈ کر رہا ہے ..." & gt؛
        & lt؛ تفصیل / & gt؛
      & lt؛ / suspense & gt؛
    & lt؛ / div & gt؛
  )؛
} 

کوڈ تقسیم کرنے میں آپ کے صارف کے تجربے پر جاوا اسکرپٹ کے اثرات کو کم کرنے میں مدد مل سکتی ہے. یقینی طور پر اس پر غور کریں اگر آپ کے پاس بڑے جاوا اسکرپٹ بنڈل ہیں اور جب شک میں، پیمائش، بہتر بنانے اور نگرانی کرنے کے لئے مت بھولنا.

یہ مضمون اصل میں 317 کے مسئلہ میں شائع کیا گیا تھا نیٹ ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کی بہترین فروخت میگزین. مسئلہ 317 خریدیں یا یہاں سبسکرائب کریں .

متعلقہ مضامین:

• سب سے بہترین جاوا اسکرپٹ فریم ورک میں سے 9
• 15 ضروری جاوا اسکرپٹ کے اوزار آپ کو استعمال کرنا چاہئے
• سب سے بہترین جاوا اسکرپٹ Apis کے 14