لمبرمجي ومطوري الويب 2.0 , الأدوات اللازمة لضغط الأكواد

[الحق يعلو]

السلام عليكم اخواني
في الاول اشكر اخي اشرف سمهوري على اتاحة الفرصة للكتابة في سوالف
كاتب الموضوع : هاوي ويب 2.0
الان ونحن نتجه الى ترقية مواقعنا الى web 2.0 فاول ما يتبادر الى الذهن لغة الجافا سكريبت
وال css لكن من دخل حقا الى هذا المجال مؤكد صادفته كبر حجم ملفات الجافاسكريبت و الcss
ما يعني ذلك زيادة مدة تحميل الصفحة و الموقع ككل
و لتفادي ذلك تم تطوير بعض الادوات لتساعد في تقليص حجم الملف اقصى حد ممكن لتسريع التحميل
لذالك جمعت ما توفر لدي من الادوات التي استخدمها واردت مشاركة تجربتي مع اخوتي في هذا المجال
اولا نتعرف على مفهوم الضغط في الجافا سكريبت
هو اخر شيء يفكر فيه المبرمج بعد كتابته الكود البرمجي لتقليص حجم الملف و زيادة سرعة تحميل الصفحة ولهذا المفهوم السابق ثلاثة طرق نتطرق اليهم
ا- :con2:ضغط الملف و ذلك بحذف جميع التعليقات و المساحات البيضاء (white space) مع ترك الكود البرمجي كما هو دون اي تغيير
اشهر اداة لهذه الطريقة هي المسمات JSMin

ناخذ مثال على هذه الاداة

var is = {
    ie:      navigator.appName == 'Microsoft Internet Explorer',
    java:    navigator.javaEnabled(),
    ns:      navigator.appName == 'Netscape',
    ua:      navigator.userAgent.toLowerCase(),
    version: parseFloat(navigator.appVersion.substr(21)) ||
             parseFloat(navigator.appVersion),
    win:     navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
    is.ie = is.ns = false;
    is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
    is.ie = is.ns = false;
    is.gecko = true;
}

وبعد الضغط يصبح الكود كمايلي

var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}

لمزيد من المعلومات و تحميل الاداة يرجى زيارة الرابط التالي
JSMIN, The JavaScript Minifier

ب- :nice:ضغط الملف و ذلك بحذف جميع التعليقات و المساحات البيضاء (white space) و مع تغيير اسماء المتغيرات الى اسماء صغيرة كارقام او حروف
و اشهر اداة لهذه الطريقة هي المسمات ShrinkSafe
وهي اداة تابعة الى framework dojotoolkit
و للعمل عليها يلزم تثبيت الجافا في الجهاز
و مثال على هذه الاداة

function MyClass(){
    this.foo = function(argument1, argument2){
        var addedArgs = parseInt(argument1)+parseInt(argument2);
        return addedArgs;
    }

    var anonymousInnerFunction = function(){
        // do stuff here!
    }
}

function MyFunc(){
    // this is a top-level function
}

// we've got multiple lines of whitespace here

و بعد الضغط

function MyClass(){
this.foo=function(_1,_2){
var _3=parseInt(_1)+parseInt(_2);
return _3;
};
var _4=function(){
};
}
function MyFunc(){
}

عند تحميل هذه الاداة custom_rhino.jar ضع ملف الجافا سكريبت في نفس المجلد
ثم عن طريق الدوس اكتب الامر التالي مع مراعاة انك في المجلد المحتوي على الاداة

java -jar custom_rhino.jar -c infile.js > outfile.js 2>&1

حيث infile.js هو ملفك المراد ضغطه outfile.js هو الملف الذي سوف تكون في النتيجة
والتحميل الاداة و مزيد من المعلومات يرجى زيارة الرابط التالي
ShrinkSafe | The Dojo Toolkit

ج- :1power:ضغط الملف كما في الطريقة (ب) و اضافة الى ذلك تغيير جميع الكلمات في الكود البرمجي الى كلمات ضغيرة
و اشهر اداة لهذه الطريقة هي packer المبرمجة من طرف dean edwards
وناخذ المثال الاول كتجربة

var is = {
    ie:      navigator.appName == 'Microsoft Internet Explorer',
    java:    navigator.javaEnabled(),
    ns:      navigator.appName == 'Netscape',
    ua:      navigator.userAgent.toLowerCase(),
    version: parseFloat(navigator.appVersion.substr(21)) ||
             parseFloat(navigator.appVersion),
    win:     navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
    is.ie = is.ns = false;
    is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
    is.ie = is.ns = false;
    is.gecko = true;
}

وبعد الضغط

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('u 1={6:2.8==\'h t q\',p:2.m(),4:2.8==\'i\',3:2.g.s(),r:9(2.7.o(n))||9(2.7),l:2.k==\'j\'}1.a=1.3.5(\'a\')>=0;b(1.3.5(\'f\')>=0){1.6=1.4=c;1.f=e}b(1.3.5(\'d\')>=0){1.6=1.4=c;1.d=e}',31,31,'|is|navigator|ua|ns|indexOf|ie|appVersion|appName|parseFloat|mac|if|false|gecko|true|opera|userAgent|Microsoft|Netscape|Win32|platform|win|javaEnabled|21|substr|java|Explorer|version|toLowerCase|Internet|var'.split('|'),0,{}))

و لتحميل الاداة و المزيد من المعلومات يرجى زيارة الرابط التالي
/packer/
ملاحضات ز
اخوتي الكرام ماهذا الموضوع الا مقدمة الى عالم وحده
وانا من خلال هذا الموضوع اردت اعطاء فكرة عامة عن هذا المجال
لم اتطرق الى كل طريقة بالتفصيل لكي لا اعقد الموضوع كما انني لم اتطرق الى
كل الادوات المتوفرة للضغط
و لقد تركت لكل اداة الرابط الرسمي لموقعها لاني متاكد من انه لا يوجد احسن من المصدر
واود ان انبه ان البعض يستخدم هذة الادوات خاصة الثانية (ب) و الثالثة (ج) لتشفير الكود الخاص به
و اي استفهامات فانا في الخدمة
واما بالنسبة لضغط ال css في تتم بالطريقة (ا) حيث يتم حذف التعليقات و الwhite space
ناخذ المثال التالي
الكود قبل الضغط

TABLE {
	FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
BODY {
	FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
TD {
	FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
TR {
	FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
A {
	CURSOR: pointer; COLOR: #4885e8; TEXT-DECORATION: none
}
A:hover {
	TEXT-DECORATION: underline
}
.a1 {
	CURSOR: pointer; COLOR: #4885e8; TEXT-DECORATION: none
}
.a1:hover {
	TEXT-DECORATION: underline
}
.Def_Table {
	BORDER-RIGHT: #c3d6ee 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #c3d6ee 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: #c3d6ee 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #c3d6ee 1px solid; FONT-FAMILY: Tahoma; BORDER-COLLAPSE: collapse; cellspacing: 0; cellpadding: 0
}

وبعد الضغط

TABLE{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}BODY{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}TD{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}TR{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}A{CURSOR:pointer;COLOR:#4885e8;TEXT-DECORATION:none}A:hover{TEXT-DECORATION:underline}.a1{CURSOR:pointer;COLOR:#4885e8;TEXT-DECORATION:none}.a1:hover{TEXT-DECORATION:underline}.Def_Table{BORDER-RIGHT:#c3d6ee 1px solid;PADDING-RIGHT:2px;BORDER-TOP:#c3d6ee 1px solid;PADDING-LEFT:0px;FONT-SIZE:8pt;PADDING-BOTTOM:2px;BORDER-LEFT:#c3d6ee 1px solid;PADDING-TOP:2px;BORDER-BOTTOM:#c3d6ee 1px solid;FONT-FAMILY:Tahoma;BORDER-COLLAPSE:collapse;cellspacing:0;cellpadding:0}

و الرابط لهذه الاداة هو
CSS Drive Gallery- CSS Compressor

هذا الموضوع ليس كاملا و الكمال لله عز وجل
فمن لديه اية اضافات نرجو ان لا يبخل بها علينا
وشكرا

[mab-dz]

شكرا لك اخي الكريم .. راح اقول بتجربتها ان شاء الله .

[سلطان الجالي]

السلام عليكم

شكرا لك اخي الكريم درس مميز ومفيد

[محمد 902]

موضوع جميل جداً ويستحق التثبيت حقيقة
لكن العنوان يحتاج تعديل من ضغط برامجكم إلى ( أعمالكم , برمجياتكم ,الأكواد )

أطيب تحية .. واتمنى تستمر على نفس التميز

[الحق يعلو]

شكرا لكم على الرد
اخي mab-dz

شكرا لك اخي الكريم .. راح اقول بتجربتها ان شاء الله .

جربها اخي و اي استفسارات انا في الخدمة

اخي سلطان الجالي
شكرا على الاطراء و هذا من واجبنا

اخي محمد 902

موضوع جميل جداً ويستحق التثبيت حقيقة
لكن العنوان يحتاج تعديل من ضغط برامجكم إلى ( أعمالكم , برمجياتكم ,الأكواد )

أطيب تحية .. واتمنى تستمر على نفس التميز

شكرا على الرد الجميل و قد اعجبني تغييرك للعنوان اتمنى من الادارة اعتماد تغييرك

[DSQ8.com]

ما شاء الله..

موضوع اكثر من رائع
ومعلومات اكثر من قيمة

شكرا جزيلا لك اخي الكريم