প্রতিটি পৃষ্ঠায় প্রধান জাভাস্ক্রিপ্ট লোড হচ্ছে? নাকি প্রাসঙ্গিক পৃষ্ঠাগুলি পর্যন্ত এটি ভেঙে দিচ্ছেন?

Question

আমার কাছে একটি 700kbসংক্ষেপিত জেএস ফাইল রয়েছে যা প্রতিটি পৃষ্ঠায় লোড হয়। 12প্রতিটি পৃষ্ঠায় আমার কাছে জাভাস্ক্রিপ্ট ফাইল থাকার আগে কিন্তু এইচটিসি অনুরোধগুলি হ্রাস করার জন্য আমি সেগুলি সমস্ত সংকুচিত করেছিলাম 1 file।

এই ফাইলটি হয় ~130kb gzippedএবং পরিবেশন করা হয় gzip। তবে স্থানীয় কম্পিউটারে এটি এখনও প্যাকড এবং প্রতিটি পৃষ্ঠায় লোড করা আছে। এটি কি পারফরম্যান্সের সমস্যা?

আমি ফায়ারব্যাগ প্রোফাইলারের সাহায্যে জাভাস্ক্রিপ্টটি প্রোফাইল করেছি কিন্তু কোনও সমস্যা দেখিনি। আমি যে সমস্যা / বিভ্রমের মুখোমুখি হচ্ছি তা হ'ল সেই ফাইলটিতে সংক্ষেপিত jquery লাইব্রেরি রয়েছে যা কখনও কখনও বর্তমান পৃষ্ঠায় ব্যবহার করা হয় না।

উদাহরণস্বরূপ jquery datatables200kb সংকুচিত এবং এটি কেবল আমার ওয়েবসাইট পৃষ্ঠাগুলির 2 এ লোড করা হয়। আর একটি হ'ল jqplotআর তা হ'ল 200kb।

আমার কাছে এখন 400kbঅতিরিক্ত কোড 80%রয়েছে যা পৃষ্ঠাগুলিতে কার্যকর হয় না ।

আমার কি 1 ফাইলে সব ছেড়ে দেওয়া উচিত?

আমার কি jquery লাইব্রেরিগুলি বের করা উচিত এবং কেবলমাত্র বর্তমান পৃষ্ঠায় প্রাসঙ্গিক জেএস লোড করা উচিত?

Comments

যদি 700 কিলো জেএস কোড থাকে আপনার এটিকে পুনরায় বিভক্ত করা উচিত এবং কেবলমাত্র আপনার সত্যিকারের স্ক্রিপ্টগুলি অন্তর্ভুক্ত করা উচিত। এছাড়াও, jQuery ব্যবহার করে ("… কম লিখুন, আরও কিছু করুন ...") এমন বিশাল জেএস ফাইলটি কিছুটা বড় আকারের বলে মনে হচ্ছে। জেএস এর এত বড় ভর দিয়ে আপনি কী করছেন?

— ফিয়েল

@ ফিইলা জ্যাকুয়ারি-ইউআই, জ্যাকিউরি.ড্যাটাবেবলগুলি দেখুন। যারা একা 400kb একসাথে। আমি অন্যান্য প্লাগইন পেয়েছি যেমন আমি jquery. માન્ય, jquery.uniform হিসাবে ব্যবহার করি - এই স্টাফটি যুক্ত করে। এক্সডি

— কাইল

সেক্ষেত্রে - নীচে যেমন বলা হয়েছে - আপনার অবশ্যই স্ক্রিপ্টগুলি বিভক্ত করা উচিত এবং কেবল যা প্রয়োজন লোড করা উচিত ...

— ফিওলা

Answer 1

আপনি কেবলমাত্র সেই পৃষ্ঠাগুলিতে প্রয়োজনীয় লাইব্রেরিগুলিকে গতিশীলভাবে লোড করতে প্রয়োজনীয় জেএস ব্যবহার করতে পারেন । তারপরে আপনাকে কেবল 385kb সঞ্চয় করে সমস্ত পৃষ্ঠায় প্রয়োজনীয় জেসগুলি (যা প্রায় 14 কে) লোড করতে হবে।

ইন্টিগ্রেশন খুব সহজ: আপনার প্রয়োজনীয় কোডগুলির সাথে কেবল "মোড়ানো" উপাদানটিতে স্টাফ অন্তর্ভুক্ত রয়েছে:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

Comments

আমি সত্যিই ওয়েবসাইট ডিজাইন পছন্দ করি। আমি কখনও প্রয়োজনের কথা শুনিনি। আপনি কীভাবে এইচটিপি অনুরোধের তুলনায় রেট করবেন? এটি কি পৃষ্ঠায় আরও http অনুরোধ রাখে না? (খারাপ না?) আমার নির্বোধ প্রশ্নের জন্য দুঃখিত।

— কাইল

কম অনুরোধ করা অবশ্যই ভাল তবে>> 350 ক সঞ্চয়ীও খুব খারাপ নয়। হ্যাঁ, আপনার সাইটের করতে হবে এক আরো অনুরোধ যদি আপনি ওই পাতাটি আরেকটি গ্রন্থাগার অন্তর্ভুক্ত। যদি এটি datatablesএকটি সাইটে এবং jqplotঅন্যটিতে থাকে তবে তা ঠিক। আমি 50% পৃষ্ঠাগুলিতে আরও পাঁচটি লিব লোড করলে সুবিধাটি অদৃশ্য হয়ে যাবে, আমি সম্মত। তবে আপনার ক্ষেত্রে, আমি এটিকে একটি খুব ভাল সমাধান হিসাবে বিবেচনা করছি (ধরে নিচ্ছি যে আপনার বাকী জেএস একটি গিজিপযুক্ত ফাইল থাকে)।

— মাইকেল

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

— কাইল

আমি দৃ strongly়ভাবে Google (বা এটি সরবরাহকারী অন্যান্য সাইট) থেকে সাধারণ লাইব্রেরি লোড করার পরামর্শ দিচ্ছি। এর 2 টি সুবিধা রয়েছে: ক) লিব ফাইলটি বিভিন্ন সাইটের মধ্যে ক্যাশে থাকে। সম্ভাবনা হ'ল ব্যবহারকারীর আগে কোনও সাইট পরিদর্শন করা হয়েছিল, এটি গুগল থেকে বোঝা জেকারিও ব্যবহার করে। এই ফাইলটি আবার ক্যাশে থেকে লোড করা হচ্ছে, সার্ভার থেকে আবার নয়! খ) এমনকি যদি এটা হয়েছে লোড করা, এটা, গুগল যা CDN থেকে এটা লোড হতে আপনার নিজের ওয়েবসার্ভার থেকে চেয়ে অনেক দ্রুত হতে হবে।

— মাইকেল

Answer 2

যদি আপনার ফ্রেমওয়ার্ক / সিএমএস / যাহাতে উপযুক্ত কার্যাদি থাকে তবে আপনি স্ক্রিপ্টিংটি শর্তাধীন @ মিশেল প্রস্তাবিত হিসাবে অন্তর্ভুক্ত করতে পারেন তবে অতিরিক্ত লাইব্রেরি ছাড়াই।

আপনার ডেটাবেটস কেস গ্রহণ করা, উদাহরণস্বরূপ, ওয়ার্ডপ্রেস পরিস্থিতি এমন কিছু এর মাধ্যমে পরিচালনা করতে পারে:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

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

Comments

আমার একটি কাস্টম ওয়েবসাইট আছে যা আমি এইচটিএমএল টেমপ্লেট থেকে তৈরি করেছি যেটি আমি থিমফরেস্টের বাইরে কিনেছি। একমাত্র সমস্যা হ'ল ছেলের কাছে J জেএস ফাইলের মতো ছড়িয়ে ছিটিয়ে থাকা ছিল এবং এটি অগোছালো। সুতরাং আমি সেগুলিকে একটি ফাইলে রেখেছি এবং এর মধ্যে কয়েকটি লাইব্রেরি রয়েছে jqplot, ডেটাবেবলস, jquery-ui। এগুলি প্রায় 550-600kb অবধি যুক্ত হয়। 100kb আমার লাইব্রেরিগুলি ব্যবহার করে জেএস। আমি মনে করি প্রতিটি পৃষ্ঠায় এত অপ্রাসঙ্গিক জেএস libs লোড না করে আমার এটি ঠিক করা উচিত। আপনার পরামর্শের জন্য ধন্যবাদ! =)

— কাইল

Answer 3

জাভাস্ক্রিপ্ট এর 700kb একটি পারফরম্যান্স সমস্যা, কারণ এটি পৃষ্ঠা লোডের পরে অবশ্যই পার্স করা উচিত। এর কারণে আপনার যত্ন নেওয়া উচিত, কেবলমাত্র সেই স্ক্রিপ্টগুলিই যেগুলি প্রয়োজনীয় are একটি বড় জাভাস্ক্রিপ্ট পুরো অ্যাজেএক্স সাইট যেমন GMail এর উপর ঠিক আছে, যখন কোনও একক পৃষ্ঠা না রেখে নেভিগেশন অভ্যন্তরীণভাবে পরিচালনা করা যেতে পারে। যাইহোক, এমনকি সম্পূর্ণ এজেএক্স সাইটগুলি অপ্রয়োজনীয় জেএস লোডিং প্রতিরোধে গতিশীল জেএস লোডিং করে (মেমরি এবং গতি উভয়ই)।

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

একটি কৌশল আছে, যা আপনি উল্লেখ না myscript.js, কিন্তু myscript.js?version={myversion}। অ্যাপ্লিকেশন আপডেটের পরে আপনি পরিবর্তন করেন {myversion}এবং আপনি জাভাস্ক্রিপ্ট পুনরায় লোড করার জন্য বাধ্য করেন।

Comments

হ্যাঁ, এই আকারের জেএসের সাথে, এটি বেশিরভাগ মোটামুটি সাধারণ লাইব্রেরিগুলির সাথে মিলিত হয়, সিডিএন ব্যবহার একটি বড় সুবিধা হবে।

— ঝাফ - বেন ডুগুইড

Answer 4

জাভাস্ক্রিপ্ট ~ 700kb একটি পারফরম্যান্স সমস্যা এবং যদি সংকুচিত হয় এবং কোডটি অনুকূলিত করার জন্য আমাদের বিধিগুলি অনুসরণ করতে হয় তা হ'ল:

1. জাভাস্ক্রিপ্টগুলি মাইনাইফ করুন - কেবল আপনি সংকোচনের এবং ডিকম্প্রেসিং করছেন যা কোড হ্রাস করেনি, প্রথমে ভাল মিনিফাই জেএস সরঞ্জামটি ব্যবহার করুন এবং আপনার কোডটি মাইনাইফ করুন। আপনি 12 টি ফাইল এবং প্রতিটি ফাইল সেরা পারফরম্যান্সের জন্য ক্লাব করার আগে সেফ্র্যাটলি মাইনাইফ হবে।

2. অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট লোডিংটি ব্যবহার করুন, অ্যাসিঙ্ক্রোনাস লোডিং ব্যবহারের ফলে খুব দ্রুত লোড সময় এবং পৃষ্ঠাটির রেন্ডারিং হয়। ব্যবহারকারীর প্রভাব খুব শক্তিশালী কারণ ভাল অ্যাসিনক্রোনাস লোডিং রেন্ডারিং প্রক্রিয়াটিকে আটকাবে না এবং ফেইলড পৃষ্ঠা লোডের সময়টি খুব বেশি হ্রাস পেয়েছে। কোনও জাভাস্ক্রিপ্ট লোড না হওয়ার কারণে চিত্র এবং অন্যান্য প্রদর্শিত আইটেমগুলিকে নিয়মিত দেখানো হবে।

3. জ্যাকিউরির জন্য গুগল সিডিএন ব্যবহার করুন ; আমি মনে করি আপনি জ্যাকুয়ারি ব্যবহার করছেন এবং এটি আপনার নিজের ওয়েবসাইট থেকে লোড করছেন যা এটি একটি অতিরিক্ত বর্ধিত সুবিধাও রয়েছে, দয়া করে জ্যাকুয়েরি লোড করতে গুগল সিডিএন (ফ্রি) ব্যবহার করুন। যেহেতু এটি প্রায় প্রতি তৃতীয় ওয়েবসাইট ব্যবহার করছে এবং এটি ইতিমধ্যে ক্যাশে ক্লায়েন্ট কম্পিউটারে উপলব্ধ।

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

5. পৃষ্ঠার গতির সাথে চেক করুন : কিছু সময় অন্যান্য সংস্থানগুলি পৃষ্ঠার লোডিং গতির উপরও দয়া করে ক্রস চেককে প্রভাবিত করে এবং অন্যান্য সংস্থানগুলিকেও অনুকূলিত করার চেষ্টা করে। প্রতিটি রিসোর্সে কিছুটা পদক্ষেপ নেওয়া আমাদের জেএস লোডিংয়ে অতিরিক্ত সময় দেয়।