رفتن به مطلب

روش های فشرده سازی کدهای سایت


Saberian

پست های پیشنهاد شده

  • مدیریت کل سایت

 

 

279e-code5.jpg

 

 

 

 

یکی از معیارهای مهم در طراحی سایت، این است که سرعت load وب سایت بالا باشد و همچنین مقدار پهنای باندی که وب سایت مصرف می کند، کم باشد. برای رسیدن به این معیار، راه حل های مختلفی در زمینه های مختلف طراحی سایت وجود دارد که یکی از آن ها کاهش حجم فایل های CSS از طریق فشرده سازی آن هاست.

 

 

 

 

ابزارهای آنلاین :

 

 

 

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

 

  • لینک ها تنها برای اعضای سایت قابل نمایش است. , CSS Compressor & Minifier, لینک ها تنها برای اعضای سایت قابل نمایش است. , لینک ها تنها برای اعضای سایت قابل نمایش است. , ...
    انبوهی از ابزارهای آنلاین فشرده‌ساز css وجود دارد که کم و بیش مشابه هم هستند و برخی ساده و برخی حرفه‌ای هستند.

 

 

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
    ابزاری برای فشرده سازی فایل‌های js با کمک ابزارهای معروف JSMin, Dojo, ShrinkSafe, YUI Compressor, Packer می‌توانید یک اسکریپت را فشرده کنید و حجم نتیجه‌ها را با هم مقایسه کنید...

 

 

  • لینک ها تنها برای اعضای سایت قابل نمایش است. , لینک ها تنها برای اعضای سایت قابل نمایش است. , ...
    این ابزارهای آنلاین (همانطور که از نامشان پیداست) همگی بر مبنای فشرده‌ساز یاهو (YUI Compressor) کار می‌کنند و هم فایل css و هم فایل js را می‌توانند فشرده کنند.

 

 

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
    برنامه‌های بهینه‌ساز زیادی برای js وجود دارد که برخی از آنها در صفحه حاضر معرفی شده اما هیچکدام آنها از نظر حرفه‌ای بودن به پای کامپایلر Google Closure نمی‌رسد. حجم خروجی این کامپایلر بی‌نظیر است چرا که فقط به نامکذاری متغیرها و حذف اضافات بسنده نمی‌کند بلکه اسکریپت را واقعا تفسیر می‌کند و مثلا اگر یک شرط همواره غلط باشد، محتویات آن را حذف می‌کند و ...
    شما به وسیله curl می‌توانید از این برنامه روی هاست خودتان استفاده کنید که یک نمونه کد مربوط به آن، به همراه ccsMin (که برای بهینه سازی css است و در ادامه اشاره می‌شود) توسط زید رشوانی که یک برنامه‌نویس سوریه‌ای است، در لینک ها تنها برای اعضای سایت قابل نمایش است. ارائه شده است.

 

 

 

 

 

ابزارهای آنلاین که در هاستی غیر از هاست شماست

 

 

 

  • BoxJS, BoxCSS
    با کمک این دو ابزار، می‌توانید یک یا چند فایل css یا js را به صورت یک فایل فشرده تحویل کاربر نهایی دهید.
    این مجموعه همچنین یک سرویس آنلاین تغییر سایز تصاویر نیز دارد که برای افرادی با پردازشگر و پهنای باند محدود می‌تواند مناسب باشد.

 

 

  • Cloud Flare
    CDNها علاوه بر خدماتی که در زمینه توزیع محتواها و فایل‌های استاتیک شما می‌کنند، خدمات دیگری هم ارائه می‌دهند هرچند معمولا رایگان نیستند. کلودفلیر که جزو بهترین CDN های رایگان است، علاوه بر CDN بودن از نظر امنیتی سایت شما را نیز تا حدود زیادی محافظت می‌کند و همچنین فایل‌های js, css سایت شما را در صورت تمایل، فشرده می‌کند.

 

 

 

 

 

ابزارهای آنلاین که در هاست شما نصب می‌شود

 

 

 

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
    یک ابزار ساده برای minify کردن css, js و سرو آن بدون فواصل و توضیحات اضافه به همراه gzip و header مربوط به کش مناسب در سمت کاربر

 

 

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
    یک ابزار پیشرفته‌تر از قبلی که علاوه بر css, js به بهینه‌سازی تصاویر نیز می‌پردازد...

 

 

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
    یک ابزار بهینه ساز حجم و gzip و کش و ... که البته برای من خوب عمل نکرد اما کدهای PHP آن برای ایده‌گرفتن خوب است.

 

 

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
    این دو کد نیز برای node.js نوشته شده است و همانطور که از نامش پیداست یکی برای css و دیگری برای js کاربرد دارد.

 

 

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
    این هم یک ابزار نوشته شده به زبان پایتون که برای بهینه سازی فایل‌های js نوشته شده.

 

 

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
    CssMin یک کتابخانه ساده PHP است که به کمک آن می‌توان به سادگی یک فایل css را minify کرد:

 

$result = CssMin::minify(file_get_contents("path/to/source.css"));

 

 

 

در ادامه به توضیح مختصری در مورد ابزارهایی که در بالا ذکر شده است داده می شود:

 

 

ابزار YUI :

 

 

3329-code1.jpg

 

 

 

برای مثال ابزار YUI که این ابزار که می شود بر روی سیستم لوکال هم ازآن استفاده نمود با زبان قدرتمند جاوا نوشته شده و به شما کمک میکند بهترین بهینه سازی رو روی فایل هاتون اجرا کنید.

 

این وب سایت به صورت آنلاین این ابزار رو به صورت رایگان در اختیار کاربران قرار میدهد و شما می توانید کد های خود را به صورت کپی پیست در باکس اول صفحه و یا دادن آدرس فایل و یا بارگذاری آن به اصطلاح فشرده یا compress کنید.

از قسمت File Type می تونید JS رو برای جاوا اسکریپت و CSS رو برای فایل های استایل انتخاب کنید و در قسمت Options هم تنظیماتی برای جاوا اسکرپیت و CSS داره که به چه نحوه فشرده شوند و یا مثلا کاراکتر های غیر ضروری حذف شوند.

 

 

 

Microsoft Ajax Minifier

 

 

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

1. در VisualStudio.NET از طریق منو به مسیر Tools, Options, Projects and Solutions بروید و گزینه Always show solution را تیک بزنید.

 

 

 

 

873d-ajax.png

 

 

سپس از Solution Explorer بر روی عنوان پروژه کلیک راست کرده و گزینه Unload Project را انتخاب نمایید.

dd89-ajax2.png

 

مجدداً روی عنوان پروژه کلیک راست کرده و گزینه Edit را انتخاب کنید و دستورات زیر را قبل از بسته شدن تگ Project اضافه کنید:

5bf8-ajax3.jpg

 

دوباره بر روی عنوان پروژه کلیک راست کرده و گزینه Reload Project را انتخاب کنید.

توجه کنید که با این کار ما یک MSBuild task با عنوان ajaxmini به پروژه اضافه کردیم. این وظیفه که در زمان Build پروژه اجرا خواهد شد فایل‌های جاوا اسکریپت را فشرده و با پسوند .min.js و همچنین فایل‌های CSS را پس از فشرده سازی با پسوند .min.css در همان مسیر فایل مادر بطور خودکار ذخیره می‌کند.

 

 

 

 

 

نکته:

 

اگر به دستورات تنظیمات فوق نگاه دقیقتری بیندازیم، متوجه عبارات Include و Exclude می شویم. توسط این دو صفت شما می‌توانید الگوهایی را جهت فشرده سازی و یا عدم فشرده سازی تعریف کنید. بدین معنا که توسط الگوی‌های ذکر شده در تنظیمات فوق از فشرده سازی فایل‌های با پسوند .min.css و .min.js خودداری می‌شود.

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

این ابزار تمامی فضاهای خالی، ';‌' و '{ }'‌های اضافی و توضیحات را از کدهای شما حذف می‌کند. متغیر‌ها و توابع شما را به اسامی کوجک‌تر تغییر نام می‌دهد. و ...

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

 

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...