ادغام فایل های Js به منظور کاهش تعداد رکویست ها به سرور

جواب هوش مصنوعی

برای ادغام فایل های JavaScript و استفاده از یک فایل واحد برای هر دو صفحه، می توانید از الگوی زیر استفاده کنید. بدین ترتیب می توانید توابع را بر اساس آدرس صفحه تعیین کنید و از تداخل نام ها جلوگیری نمایید.

$(document).ready(function () {
  const page = window.location.pathname;

  if (page === "/ContactUs") {
    function SayHello_Contact() {
      alert("Hello ContactUs");
    }
    SayHello_Contact(); // اجرای تابع مخصوص این صفحه
  }

  if (page === "/AboutUs") {
    function SayHello_About() {
      alert("Hello AboutUS");
    }
    SayHello_About(); // اجرای تابع مخصوص این صفحه
  }
});

در این کد، توابع با نام های مختلفی که خاص هر صفحه هستند، تعریف شده اند. به این ترتیب، می توانید از تداخل نام ها جلوگیری کنید و تنها یک فایل JavaScript را به کلاینت ارسال کنید.

برای ذخیره سازی فایل های استاتیک و استفاده از CDN رایگان، پیشنهاد می کنم از سرویس هایی مانند CDNJS یا jsDelivr استفاده کنید. این سرویس ها امکان بارگذاری فایل ها به صورت رایگان را فراهم می کنند و می توانند به مدیریت ترافیک سرور شما کمک کنند.

روشی که برای این کار انتخاب کردید بیشتر یک ایده است و بد هم نیست. اما ببینید داشتن توابع هم نام اونم به تعداد زیاد کار صحیحی نیست بنظرم !!!

توابع رو به دو صورت میشه از هم تفکیک کرد.

• داشتن نام متفاوت
• داشتن امضای متفاوت

به عنوان مثال تابع زیر رو در نظر بگیرید.

function SayHello_1() 
{
    alert("Hello AboutUS");
}

function SayHello_2() 
{
   alert("Hello ContactUs");
}

در مثال بالا نام توابع تفاوت دارن و برای فراخوانی هم نام رو میتونید صدا بزنید. و اما مثال زیر رو ببینید.

function SayHello(param) 
{
   alert("Hello AboutUS");
}

function SayHello() 
{
   alert("Hello ContactUs");
}

دو تابع بالا هم همنام هستن ولی یکی از توابع به یک ورودی نیاز داره. بنابراین این دو تابع گرچه همنام هستن ولی موقعی که صداشون میزنید چون یکی بدون پارامتر هست و دیگری با پارامتر به راحتی قابل تشخصی هستن.

اما در هر صورت روشی که شما هم استفاده کردید جواب داده اما در هر بار فراخوانی باید به آدرس مورد نظر بره و تابع رو پیدا کنه که احتمالا در سرعت کار تاثیر خواهد گذاشت.

ضمنا در نظر داشته باشید فایلهای Js و Css که در فایل جداگانه در پروژه قرار دارن در اولین فراخوانی سایت و نمایش صفحه در مرورگر کش میشن و دیگه فشاری رو از اون ببعد به سرور شما نمیارن.

ممنون از پاسخ گویی..

اخه مشکل فقط متغیر ها نیست شاید بشه با دو روز وقت کامل نام ها را وابسته به صفحات کرد و مثلا به اخر اسامی یک _AboutUs مثلا اصافه کرد. مشکل اینجاست که بعنوان مثال کلید BackSpace توی برخی صفحات غیرفعال شده یا توی بعضی جاها که فارسی کلا غیر فعال شده و در حالت فارسی هم تایپ بشه شما انگلیسی میبینی و کلی چیزهای دیگه...

یعنی مثلا keypress  تعریف شده واسه صفحه aboutUs که نمیخام توی ContactUs اجرا بشه و دنبال هستم فایل js دو تا را ادغام کنم. 

به نظرتون اگه بیام کل کدهای مربوط به صفحه aboutus را داخل یک فانکشن AboutUs() بذارو و کل کدهای جاوا اسکریپت مربوط به صفحه ContactUs() را بیام داخل تابع ContactUs() بذارم بعد این توابع را میتونم به راحتی داخل یک فایل مشترک جای بدم، الان یک فایل دارم با یک عالمه تابع خیلی گنده !! هر کدام شاید 10 کیلو بایت مینی فای شده تکست دارن، به هر حال.

بعد توی صفحه Html  هر کدام از صفحات وبسایتم مطابق زیر عمل کنم . 

Url: www.example.com/AboutUs

<script>      AboutUs() <script/>

و یا :

Url: www.example.com/ContactUs

<script>      ContactUs() <script/>

داخل File.js هم دارم :

function ContactUs() {

//many functions, variable , ...  are here

}

function AboutUs() {

//many functions, variable , ... 
}

در این صورت توی هر کدام از صفحات Html مربوط به وبسایتم فقط یک خط کد جاوا اسکریپت دارم که مربوط به اجرای تابع اون صفحه  و در ادامه اجرای یک عالمه دستور دیگه داخل فایل مشترک File.js میشه.