چگونه جاوااسکریپت را خارج سازی و بهینه‌سازی کنیم

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 26 فروردین 1397
دسته بندی ها : جاوا اسکریپت

یکی از پرارزش‌ترین و مهمترین راه‌ها برای بهینه‌سازی کردن کدهای جاوااسکریپتی این است که آن ها را از فایل HTMLتان جدا کنید. در این مطلب قصد دارم شیوه ساده خارجی‌سازی (جدا کردن جاوااسکریپت از HTML) کدهای جاوااسکریپت و بهینه‌سازی آن‌ها را به شما بگویم.

شیوه خارجی‌سازی کدهای جاوااسکریپت

یک راه بسیار خوب برای اینکه بهره‌وری کدهای‌مان بالاتر برود این است که آن‌ها را خارج از HTML نگه‌داریم و آن‌ها را فشرده کنیم. در حقیقت منظورمان از خارجی سازی نیز دقیقا همین است. اینکه تمام کدهای جاوااسکریپت را در یک فایل با پسوند .js قرار دهیم. 

انجام چنین کاری بسیار آسان است. تنها کاری که لازم است انجام دهید این است که به سادگی تمام مواردی که در بین تگ‌های Script فایل HTML قرار دارد را حذف کنید و در یک فایل با پسوند .js قرار دهید، بعد از آن به سادگی با استفاده از تگ script، فایل را آدرس دهی کنید.

در زیر می‌توانید یک نمونه بسیار سریع و ساده را از این حالت مشاهده کنید. من در زیر قسمت‌های جاوااسکریپتی بین تگ script را انتخاب می‌کنم و آن را cut می‌کنم.

خارج سازی جاوا اسکریپت

حال میان تگ‌های Script خالی است. بعد از این باید یک فایل جاوااسکریپتی با هر نامی که دوست دارید ایجاد کنید. من نام فایل را site.js قرار می‌دهم و آن را ذخیره می‌کنم. بعد از این کار تمام کدها را در آن قرار می‌دهم.

حال باید آن را به HTML متصل کنم. برای این کار کافی‌ست از قطعه‌ کد زیر استفاده کنید:

 

تمام شد، کارتان خوب بود، حال جاوااسکریپت خارجی‌سازی شد.

چگونه کدهای جاوااسکریپت را بهینه‌سازی کنیم

یکی از ویژگی‌های خوب خارجی‌سازی کدهای جاوااسکریپت این است که می‌شود با سادگی بیشتری عملیات کوچک‌سازی و بهینه‌سازی را انجام دهید. وقتی کدهای کوچکتری داشته باشید و اندازه آن را کوچک‌تر نموده باشید در نهایت فایل‌هایی با سرعت اجرای بیشتری دارید. 

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

خب، چگونه عملیات بهینه‌سازی را انجام دهیم؟ چند راه ساده برای اینکار وجود دارد.

استفاده کردن از پلاگین‌ها

بیشتر محیط‌های کدنویسی مدرن پلاگین‌هایی برای کوچک‌سازی فایل‌های جاوااسکریپت ارائه می‌دهند. برای مثال ویژوال استدیو کد یا براکتس و… . اگر در محیط ویژوال استدیو کد هستید، کافی‌ست در قسمت پلاگین‌ها minify را جستجو کنید، در نهایت با چندین گزینه مختلف روبرو می‌شوید. 

پلاگین جاوااسکریپت

برای کد ادیتور براکتس نیز به همین شیوه عمل کنید، بعد از جستجوی چنین موردی با گزینه‌ای به نام JavaScript minifier برخورد می‌کنید، که این مورد بهترین گزینه شماست.

ویرایشگر Brackets

به یاد داشته باشید که بعد از کوچک‌سازی فایل‌های‌تان شما نیاز دارید که روش آدرس دهی‌تان را تغییر دهید. به این دلیل که بعد از کوچک‌سازی فایلی با نام site.js به site.min.js تغییر می‌کند. به همین دلیل باید مقدار src مربوط به تگ script را با مقدار جدید تغییر بدهید. در غیر اینصورت تمام پروسه کوچک‌سازی به هیچ دردی نمی‌خورد.

JSCompress

اگر از یک ادیتور مدرن استفاده نمی‌کنید و یا اینکه به نصب کردن افزونه دسترسی ندارید می‌توانید از ابزارهای آنلاینی مانند JSCompress استفاده کنید. برای کار با این ابزار تنها کافی‌ست که متن جاوااسکریپت مورد نظرتان را در ورودی که در نظر گرفته قرار دهید و بعد از آن روی دکمه Compress JavaScript کلیک کنید. بعد از آن مشاهده خواهید کرد که کدهای‌تان با درصد ۷۴٪ فشرده‌سازی و بهینه‌سازی می‌شود.

بهینه سازی

البته این قطعه کد بسیار ساده با حجم کمی بود که شاید تغییرات بسیار محسوسی ایجاد نکند، اما تصور کنید که فایل‌های جاوااسکریپتی‌تان بسیار زیاد و پرحجم باشد، مطمئنا این تکنیک حجم بسیار زیادی از داده‌های شما را ذخیره می‌کرد. وقتی که ترافیک وبسایت‌تان بالا برود، این متد واقعا به شما کمک خواهد کرد.

فواید کوچک‌سازی و خارجی‌سازی کدها

یکی از فواید کوچک‌سازی و خارجی‌سازی کدها این است که به شما دسترسی با سطح بالاتری را برای مدیریت کشینگ می‌دهد.

تصور کنید که یک قطعه کد جاوااسکریپتی را دارید و باید از آن در چندین صفحه مختلف استفاده کنید. اگر در هر صفحه HTML یکبار جاوااسکریپت را به صورت مستقیم وارد کنید، کاربر بعد از هر بار مشاهده صفحه نیاز دارد که آن‌ها را نیز اجرا کند، اما اگر جاوااسکریپت در یک فایل قرار بگیرد، مرورگر کاربر بعد از مشاهده صفحه اول، فایل را کش می‌کند و برای اجرا در صفحات دیگر نیازی به بارگذاری مجدد آن ندارد. این موضوع نیز باعث می‌شود که نرخ درخواست‌ها کمتر شود.

اگر می‌خواهید این موضوع بهینه‌تر نیز شود، می‌توانید از یک CDN برای اینکار استفاده کنید و فایل‌های جاوااسکریپتی را در آن‌ها قرار دهید. برای مثال وقتی فردی از آمریکا قصد داشته باشد به یک فایل جاوااسکریپتی دسترسی داشته باشد، می‌تواند درست به همان سرعتی که یک فرد در انگلیس به آن دسترسی دارد، دسترسی داشته باشد. البته این موضوع هزینه بر است اما یادتان باشد که سرعت وبسایت بسیار افزایش پیدا می‌کند.

منبع

مقالات پیشنهادی

چگونه کد خود را با استفاده از عملگر گسترش، ساده‌سازی کنیم؟

اکثر مردم می‌دانند که Object، Array، Set و موارد مشابه قابل تکرار هستند. این که تمام انواع اولیه هم operandهای معتبر عملگر گسترش هستند، ما را قادر می‌...

چگونه فایل‌های جاوااسکریپتی را ساختاربندی کنیم؟

افرادی وجود دارند که از من می‌پرسند که چگونه فایل‌های جاوااسکریپتی‌ام را می‌نویسم - خب این موضوع یک دروغ بود، کسی از من این سوال را نپرسیده است اما اگ...

خالق لاراول چگونه کار می‌کند؟

اخیرا افرادی را دیدم که وضعیت / روند کاری خود را به اشتراک می‌گذارند. پس من هم تصمیم گرفتم که همین کار را انجام دهم.

چگونه از Bootstrap به همراه React استفاده کنیم؟

با محبوبیت روز افزون برنامه‌های تک صفحه‌ای در سال‌های اخیر، تعداد زیادی فریم‌وورک جاوااسکریپت frontend مانند Angular، React، VueJS و Ember پدید آمده‌ا...