আমি কি একক ফাইলে জেএস / সিএসএস ফাইলগুলি একত্রিত করব?


11

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

আমি এটি যেভাবে দেখছি তাতে কয়েকটি বিকল্প রয়েছে:

  1. সাইট জুড়ে ব্যবহৃত সমস্ত ফাইল একত্রিত করুন এবং প্রতিটি পৃষ্ঠা একই সংযুক্ত ফাইলটি পেয়ে যায় - ডাউনসাইড হ'ল স্ক্রিপ্টটিকে বিশৃঙ্খল করে ফেলা অব্যবহৃত সামগ্রী (এবং একটি ভারী প্রথম লোড (কোনও উপাদান স্ক্রিপ্ট পরিবর্তিত হলে পুনরায় লোডও করা হয়))

  2. প্রতি পৃষ্ঠার ভিত্তিতে ফাইলগুলি একত্রিত করুন - সর্বনিম্নতা প্রতিটি পৃষ্ঠায় বিভিন্ন প্রয়োজনীয়তার সাথে আলাদা আলাদা সম্মিলিত ফাইল পায় (প্রতিটি পৃষ্ঠার জন্য প্রথম ভারী ভারী)

  3. সুপারিশগুলির কঠোর 'কেবল একটি ফাইল' ব্যাখ্যা উপেক্ষা করুন এবং একাধিক ফাইলগুলিতে পৃষ্ঠার যথাযথ লোড থাকায় ক্যাশে আশা করা যায় যে সাধারণ ক্ষেত্রে এইচটিটিপি অনুরোধের সংখ্যাকে উপেক্ষা করবে - প্রতিটি পৃষ্ঠায় এইচটিটিপি অনুরোধের সংখ্যা হ্রাসমান

থটস?


আপনি এটা ভুল করছেন. হয় পৃথক ফাইলগুলিতে অংশগুলি আলাদা করুন এবং ওয়ার্মআপ হিট নিন (অনুরোধ এবং কোল্ড ক্যাশের বৃহত্তর # দ্বারা সৃষ্ট) বা প্রোগ্রামগতভাবে উত্স ফাইলগুলির সার্ভারসাইড সংযুক্ত করুন এবং প্রতি লিঙ্কে প্রতি 1 জেএস, সিএসএস, এইচটিএমএল পৃষ্ঠা পরিবেশন করুন। বিভিন্ন মাইম-প্রকারের সাথে ফাইলগুলি মেশানো = খারাপ।
ইভান প্লেইস

এবং ... @ ল্যারি স্মিথমিয়ার তার উত্তরে বলেছিলেন, এই ফাইলগুলির জন্য প্রাথমিক ক্যাশে ওয়ার্মিংয়ের ব্যয় সম্পূর্ণরূপে এড়াতে সাধারণ লাইব্রেরি সরবরাহ করার জন্য একটি সিডিএন (প্রাক্তন গুগল) ব্যবহার করুন।
ইভান প্লেইস

উত্তর:


11

বিকল্প 2 সবচেয়ে খারাপ; এর অর্থ হ'ল প্রয়োজনীয় জেএস স্ক্রিপ্টগুলির পৃথক সংমিশ্রণ সহ প্রতিটি পৃষ্ঠা একটি এইচটিটিপি অনুরোধের ফলস্বরূপ। এটি অভিনয়কে আরও খারাপ করে তুলবে ।

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

প্রথম পৃষ্ঠার হিটটি বিভিন্ন ফাইলের চেয়ে ধীর হতে পারে তবে অন্য পৃষ্ঠাগুলি হিট ক্যাশেড গ্লোবাল জেএস ব্যবহার করবে বলে এটি এখনও মূল্যবান।

একটি টিপ যদিও; আপনি ইতিমধ্যে না থাকলে এগুলি স্বয়ংক্রিয়ভাবে মার্জ করুন!


2
আপনার হোম পেজ / অবতরণ পৃষ্ঠাগুলি দ্বারা প্রদত্ত প্রাথমিক ছাপ সম্পর্কে আপনার খুব সচেতন হওয়া দরকার। প্রথম পৃষ্ঠাটি যদি দর্শক দেখেন তবে লোড করা ধীর হয় তারা হয়ত দ্বিতীয় পৃষ্ঠার দিকে তাকাতে বিরক্ত করবেন না।
পেলস

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

4

আমি সাধারণত "গ্লোবাল জাভাস্ক্রিপ্ট" - jQuery এবং সাধারণ প্লাগইনগুলি - একটি একক ফাইলে একত্রিত করি এবং তারপরে প্রয়োজনে অতিরিক্ত প্লাগইন পৃথক ফাইল হিসাবে পরিবেশন করি।

উদাহরণস্বরূপ, একটি সাইট যা আমি global.jsচালিয়েছি তার অনেক পৃষ্ঠায় ডেটা টেবিল রয়েছে যাতে আমার কাছে jQuery, ডেটা টেবিল এবং সুপার ফিশ থাকে (আমার মেনুতে)। সাইটে দুটি পৃষ্ঠা রয়েছে যা একটি "লাইটবক্স" ব্যবহার করে তাই সেই দুটি পৃষ্ঠার জন্য আমার একটি পৃথক স্ক্রিপ্ট রয়েছে।

সিএসএসের জন্য, আমি কেবল পুরো সাইটের জন্য একটি একক ফাইল পরিবেশন করি এবং সিএসএসকে যথাসম্ভব সাধারণ করার চেষ্টা করি - বেশিরভাগ পৃষ্ঠায় কেবল কয়েকটি অনন্য সিএসএস উপাদান থাকে।


1

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

যদি আপনার জেএসের যথেষ্ট পরিমাণে দ্বিতীয় বিভাগে ঠেলাঠেলি করা যায় তবে আপনি আপনার ব্যবহারকারীদের জন্য আরও ভাল অভিজ্ঞতা তৈরি করে পৃষ্ঠার অনুমিত প্রাথমিক লোডের গতি উন্নত করতে পারেন।


1

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

ব্রাউজার কখন স্বয়ংক্রিয়ভাবে জাভাস্ক্রিপ্ট ক্যাশে সাফ করে?

এবং প্রথম উত্তরটি শক্ত সোনার।


2
আমি ইতিমধ্যে গুগল হোস্ট করা jQuery লাইব্রেরিটি ব্যবহার করছি, তবে আমার অর্থ ছিল সেই সাইটটি নির্দিষ্ট ফাইলগুলি (যেমন স্ট্যাক এক্সচেঞ্জ সাইটের জন্য, যখন অনুরূপ প্রশ্নগুলির সন্ধানের জন্য আপনি স্ক্রিপ্ট পেয়েছেন, স্ক্রিপ্টটি রেন্ডার করতে হবে) চিহ্নডাউন, এবং ট্যাগ পরামর্শ, যার মধ্যে সমস্তই আলাদা আলাদা ফাইলগুলিতে বিকাশমান হতে পারে)। অন্যদিকে, আপনি যদি গুগল jQuery হোস্ট করা জেএস ব্যবহার করেন তবে ১.৪ এবং ১.৪.২ উভয়ই আপনাকে একই বিষয়বস্তু দেবে (এই মুহুর্তে), ১.৪.২ এক বছরের জন্য ক্যাশে করা হয়, তবে ১.৪ কেবল এক ঘন্টার জন্য ক্যাশে থাকে।
সেবজায়ার

দুর্দান্ত টিপ! হোস্টেড জিকুয়েরিতে ক্যাচিং সময়কাল সম্পর্কে অন্তর্দৃষ্টি দেওয়ার জন্য ধন্যবাদ।
ল্যারি স্মিথমিয়ার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.