أصول الويب - نصائح لتحسين التنظيم والأداء

() translation by (you can also view the original English article)

تذكر مرة أخرى إلى عندما اضطررنا إلى أنفاق الكثير من الوقت في الاستفادة المثلى من الأصول في مشروعنا (الصور، المغلق، إلخ..)؟ جيدا اليوم، المستخدمين لديهم اتصال إنترنت أسرع بكثير، ويبدو أننا تستطيع أن تستخدم أكبر من الصور أو ملفات فلاش أكبر مع الكثير من ملفات الفيديو والصور داخل. ومع ذلك، مع ظهور التنمية المتنقلة، ونحن مرة أخرى مرة أخرى في نفس الوضع. أنها بالغة الأهمية لإنشاء مواقع جيدا الأمثل، حيث أن لدينا تطبيقات أسرع، تنزيل محتوى أقل والاستجابة فورا.

صور

خدمة الحجم المناسب

في كثير من الأحيان نستخدم نفس الصور لأجزاء مختلفة من موقعنا. على سبيل المثال، يكون جميع المنتجات في متجر على إنترنت، بصورة عامة. لنفترض أن لدينا ثلاث صفحات حيث لدينا لإظهار تلك الصور-صفحة واحدة لقائمة المنتجات، وصفحة أخرى للحصول على تفاصيل المنتج، وصفحة ثالثة الذي يظهر فقط في الصورة بحجمها الأصلي.

لذلك ، نحتاج إلى ثلاثة أحجام مختلفة للصورة ، وإذا استخدمنا نفس الملف لجميع الأماكن الثلاثة المختلفة ، فسيعمل المتصفح على تنزيل الصورة بالحجم الكامل حتى بالنسبة لصفحة القائمة ، حيث قد نحتاج في الواقع إلى صورة 200 × 200 فقط. إذا كان الملف الأصلي حوالي 1 ميغابايت ولدينا عشرة منتجات في كل صفحة ، فسيعمل المستخدم على تنزيل 10 ميغابايت. هذه ليست فكرة جيدة إذا كنت تستطيع ، فحاول إنشاء صور مختلفة للأجزاء المختلفة من موقعك ، وهذا سيحفظ الكثير من الكباري لمستخدميك. إنها فكرة جيدة أن تضع في اعتبارك دقة الشاشة الحالية. على سبيل المثال ، إذا فتح شخص ما موقعك على iPhone ، فلا حاجة لعرض صورة رأسية عملاقة ، والتي تستخدمها عادة. باستخدام استعلامات وسائط CSS ، يمكنك إرسال صورة بحجم أصغر:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .header {
        background-image: url(../images/background_400x200.jpg);
    }
}

ضغط

إرسال صورة بالأبعاد الصحيحة فقط ليست دائماً كافية. يمكن ضغط بعض تنسيقات الملفات الكثير دون أن تفقد جودتها. هناك العديد من البرامج التي يمكن أن تساعدك على الخروج. على سبيل المثال ، يوفر Photoshop ميزة لطيفة تسمى Save for Web and Devices.

هناك الكثير من الخيارات في مربع الحوار هذا ، لكن أحد أهمها هوQuality. يمكن تعيينه إلى شيء مثل 80٪ تقليل حجم الملف بشكل ملحوظ.

وبطبيعة الحال، يمكنك استخدام التعليمات البرمجية لضغط الملفات، ولكن أنا شخصيا أفضل فوتوشوب، وأنا باستخدام فإنه كلما كان ذلك ممكناً. هنا مثال بسيط مكتوب في بي إتش بي:

function compressImage($source, $destination, $quality) {
    $info = getimagesize($source);
    switch($info['mime']) {
        case "image/jpeg":
            $image = imagecreatefromjpeg($source);
            imagejpeg($image, $destination, $quality);
        break;
        case "image/gif":
            $image = imagecreatefromgif($source);
            imagegif($image, $destination, $quality);
        break;
        case "image/png":
            $image = imagecreatefrompng($source);
            imagepng($image, $destination, $quality);
        break;
    }
}
compressImage('source.png', 'destination.png', 85);

العفاريت

أحد الأشياء التي يمكنك القيام بها لزيادة أداء التطبيق الخاص بك هو تقليل عدد الطلبات إلى الخادم. لذلك ، كل صورة جديدة تعني طلبًا جديدًا. من الجيد دمج صورك في صورة واحدة. تسمى الصورة الناتجة بـ sprite وبتغيير نمط CSS background-position ، يمكنك عرض جزء الصورة الذي تحتاجه فقط. على سبيل المثال ، يستخدم Twitter Bootstrap النقوش المتحركة لرموزه الداخلية:

ثم في CSS، يمكنك أن تفعل شيئا مثل هذا، لإظهار أيهما جزء من العفريت كنت تريد:

1	.icon-edit {
2	background-image: url("../img/glyphicons-halflings-white.png");
3	background-position: -96px -72px;
4	}

التخزين المؤقت

آلية التخزين المؤقت في المستعرض هو صديقك. نعم ، أحيانًا أثناء التطوير ، يمكن أن يؤدي ذلك إلى بعض المواقف funny للغاية ، ولكنه يساعد بالفعل على تحسين أداء موقعك. يخزن كل متصفح محتوى مثل الصور أو جافا سكريبت أو CSS. هناك عدة طرق للتحكم في التخزين المؤقت، واقترح أن تقرأ هذه المادة العظيمة لاستعراض مفصل. بشكل عام، يمكنك التحكم في العملية بإعداد الرؤوس، كما يلي:

1	$expire = 60 * 60 * 24 * 1;// seconds, minutes, hours, days
2	header('Cache-Control: maxage='.$expire);
3	header('Expires: '.gmdate('D, d M Y H:i:s', time() + $expire).' GMT');
4	header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');

الجلب المسبق

HTML5 تتحرك إلى الأمام كل يوم. هناك ميزة لطيفة تسمى prefetching والتي تخبر المتصفح أنك ستحتاج إلى بعض الموارد في المستقبل القريب ، ويجب تنزيلها الآن ، مقدمًا. فمثلا:

1	<link rel="prefetch" href="/images/background.jpg">

نظام URI البيانات/صور مضمنة

بضع سنوات مضت كان على تطوير صفحة ويب بسيطة، التي كان من المفترض أن يكون ملف HTML واحد فقط. بالطبع هناك العديد من الصور، التي كان لي أن تدرج. ساعدتني مخططات معطيات URI في حل المشكلة. والفكرة هي تحويل صورك إلى سلسلة مشفرة 64 base ووضعها في السمة src لعلامة img. فمثلا:

1	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

باستخدام هذا النهج، الصورة الخاصة بك في الواقع في ال HTML وقمت بحفظ أحد طلب HTTP. وبطبيعة الحال، إذا كان لديك صورة كبيرة السلسلة ستكون طويلة حقاً. هنا هو سيناريو PHP بسيط الذي يقوم بتحويل الصور إلى سلاسل base64:

$picture = fread($fp,filesize($file));
fclose($fp);
// base64 encode the binary data, then break it
// into chunks according to RFC 2045 semantics
$base64 = base64_encode($picture);
$tag = '<img src="data:image/jpg;base64,'.$base64.'" alt="" />';
$css = 'url(data:image/jpg;base64,'.str_replace("\n", "", $base64).'); ';

كنت قد تجد هذه مفيدة في بعض الحالات، ولكن نضع في اعتبارنا أن لا يعمل جيدا في IE.

CSS

أحب أن أعتقد أن كتابة CSS تشبه كتابة التعليمات البرمجية. لا يزال عليك تنظيم أنماطك ، لتحديد كتل مختلفة والعلاقة بينهما. لهذا السبب أعتقد أن إدارة CSS مهمة حقًا. يجب أن يكون لكل جزء من التطبيق أنماطه الخاصة ويجب فصلها بشكل جيد. إن حفظ كل شيء في ملفات مختلفة يوفر تنظيمًا جيدًا ، ولكنه يأتي أيضًا مع مشكلاته الخاصة.

نحن نعلم جميعا أن استخدام البيانimport ليست فكرة جيدة للغاية. ذلك لأن كلimport جديد يعني طلبًا جديدًا إلى الخادم. وإذا كان لديك ، على سبيل المثال ، 20 ملفًا مختلفًا .css فهذا يعني أن المتصفح سيقدم 20 طلبًا. ولا يعرض المتصفح / يعرض الصفحة قبل تنزيل جميع الأنماط. إذا كانت بعض ملفات .css مفقودة أو كبيرة جدًا ، فسوف تحصل على تأخير كبير قبل رؤية شيء ما على الشاشة.

استخدام CSS Preprocessors

تعمل معالجات ما قبل المعالجة على حل جميع المشكلات المذكورة أعلاه. لا تزال تقسم الأنماط إلى ملفات مختلفة ، ولكن في النهاية ، يجمع المعالج الأولي كل شيء في ملف واحد بتنسيق .css. فعلا أنها توفر مجموعة من الميزات الرائعة مثل المتغيرات وكتل متداخلة، و mixins والميراث. التعليمة البرمجية لا تزال تبدو مثل المغلق، ولكن منظم منسق جيدا. هناك عدد قليل من المعالجات المسبقة الشعبية التي تستحق التدقيق - Sass و LESS و Stylus. هنا مثال بسيط مكتوب في LESS:

.position(@top: 0, @left: 0) {
    position: absolute;
    top: @top;
    left: @left;
    text-align: left;
    font-size: 24px;
}
.header {
    .position(20px, 30px);
    .tips {
        .position(10px, -20px);
    }
    .logo {
        .position(10px, 20px);  
    }
}

وسوف تنتج

.header {
    position: absolute;
    top: 20px;
    left: 30px;
    text-align: left;
    font-size: 24px;
}
.header .tips {
    position: absolute;
    top: 10px;
    left: -20px;
    text-align: left;
    font-size: 24px;
}
.header .logo {
    position: absolute;
    top: 10px;
    left: 20px;
    text-align: left;
    font-size: 24px;
}

أو ، على سبيل المثال ، إذا كان لديك تصميم لأحد الأزرار وترغب في إنتاج الزر نفسه فقط ولكن بلون آخر للنص ، فيمكنك القيام بذلك:

.button {
    border: solid 1px #000;
    padding: 10px;
    background: #9f0;
    color: #0029FF;
}
.active-button {
    .button();
    color: #FFF;
}

كفاءة المغلق

عادةً ، لا يفكر معظم المطورين في كفاءة CSS. تنعكس كفاءة CSS على عرض الصفحة وإذا كانت أنماطك غير فعالة ، فسيتم عرض التطبيق ببطء بواسطة المتصفحات. حقيقة مثيرة للاهتمام هي أن المتصفحات تحليل مختارات CSS من اليمين إلى اليسار. مما يعني أن الشفرة التالية:

1	body ul li a {
2	color: #F000;
3	text-decoration: none;
4	}

... ليست فعالة على الإطلاق. وذلك لأن المحرك سيحصل على جميع علامات وسيتعين عليه تقييم كل عنصر من العناصر الأصلية حتى يتمكن أخيراً من جمع النمط المطلوب. يجب أن نعرف أيضا أن من حيث الكفاءة، والمحددات تصنف نوع من الترتيب التالي: معرف فئة، والوسم وعالمية. وهذا يعني أنه سيتم تقديم عنصر مع مجموعة معرف أسرع من عنصر مع محدد علامة فقط. وبطبيعة الحال، لا يوجد أي معنى لإضافة معرفات على كافة العناصر الموجودة في شجرة دوم، ولكن بالتأكيد يجب التحقق من التعليمات البرمجية الخاصة بك وتحسين أنه حيثما كان ذلك ممكناً. على سبيل المثال، إذا كان لديك شيء من هذا القبيل:

1	ul #navigation li {
2	background: #ff0232;
3	}

يجب إزالة الجزء ul ، نظرًا لأن لديك عنصرًا واحدًا فقط من عناصر التنقل على الصفحة. أو في المحدد التالي:

1	body .content p {
2	font-size: 20px;
3	}

من الواضح أن عنصر .content هو طفل لعلامة body. جميع العناصر هي في الواقع أطفال هذا العنصر.

فيما يلي اثنين من وصلات مفيدة حول هذا الموضوع: developers.google.com والمغلق--tricks.com

حجم الملف

كما ذكرنا أعلاه ، من الجيد الحصول على أقل قدر ممكن من الشفرات ، لأن المتصفح لا يعرض الصفحة قبل تنزيل CSS. فيما يلي بعض النصائح لتقليل حجم الملف.

الجمع بين أنماط مماثلة:

.header {
    font-size: 24px;
}
.content {
    font-size: 24px;
}

. التحويلات إلى:

1	.header, .content {
2	font-size: 24px;
3	}

استخدم الاختزال. بدلا من:

.header {
    background-color: #999999;
    background-image: url(../images/header.jpg);
    background-position: top right;
}

اكتبها بهذا الشكل:

1	.header {
2	background: #999 url(../images/header.jpg) top right;
3	}

تصغير رمز CSS الخاص بك. يمكنك القيام بذلك باستخدام أداة تقوم بشكل عام بإزالة كل المسافات والخطوط الجديدة. على سبيل المثال CSSOptimiser أو Minifycss. أنها ممارسة شائعة لاستخدام مثل هذه الصكوك على جانب الملقم للتطبيق، أي شيء مكتوب لغة النهاية الخلفية. عادة هذه المكونات صغر التعليمات البرمجية الخاصة بك وتخدم المستخدم.

وضع ملفات CSS`<head`>العلامة</head>

It is good practice to include your .css files in the head tag, that way the browser will download it first.

جافا سكريبت

تقليل عدد طلبات HTTP

مثلما هو الحال مع CSS الخاص بك - من الجيد تقليل عدد الطلبات المرسلة إلى الخادم. في معظم الحالات ، لن يؤدي تحميل ملفات جافا سكريبت إلى إيقاف عرض الصفحة ، ولكنه سيجعل بعض أجزاء الصفحة غير وظيفية.

صغر التعليمات البرمجية الخاصة بك

هناك مجموعة من المكتبات التي تقوم بتعقب جافا سكريبت. إنه شيء من شأنه أن يقلل حجم الملفات ، ولكن ضع في اعتبارك أنه من الجيد الحفاظ على نظافة التعليمات البرمجية في بيئة التطوير. معظم هذه الأدوات بتغيير اسم المتغيرات الخاصة بك وتحويل كل شيء إلى سلسلة سطر واحد، مما يجعل من المستحيل تقريبا عملية التصحيح.

CommonJS ، AMD ، RequireJS - جربها

جافا سكريبت أصلاً ليس لديها إليه لإدارة الوحدات النمطية. لذا، هي اخترع كل هذه الأمور لحل هذه المشكلة. أنها توفر API التي يمكنك استخدامها لتحديد واستخدام الوحدات النمطية. على سبيل المثال ، إليك مثال مأخوذ من http://requirejs.org/:

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

داخل main.js ، يمكنك استخدام يتطلب () لتحميل أي برامج نصية أخرى تحتاج إليها:

require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

استخدم مساحات الأسماء

إذا كنا نتحدث عن تنظيم الكود ، فلا يمكننا تخطي الجزء المتعلق بمساحات الأسماء. في الأصل ، لا توجد مثل هذه الميزة في جافا سكريبت ، ولكن لا يزال بإمكانك تحقيق نفس الشيء باستخدام رمز صغير. على سبيل المثال ، إذا كنت ترغب في بناء إطار MVC الخاص بك ، فمن المحتمل أن يكون لديك الصفوف التالية:

1	var model = function() { ... };
2	var view = function() { ... };
3	var controller = function() { ... };

إذا تركت الأشياء كما هي في الكود السابق ، فحينها تصبح عامة ، وهناك فرصة أكبر لإحداث تضارب مع المكتبات الأخرى في مشروعك. لذلك ، فإن تجميعها في كائن مستقل (مساحة اسم) يجعل الإطار محميًا:

var MyAwesomeFramework = {
    model: function() { ... },
    view: function() { ... },
    controller: function() { ... }
}

اتباع أنماط التصميم

ليست هناك حاجة إلى إعادة اختراع العجلة. أصبحت Javascript شائعة بالفعل وهناك الكثير من الممارسات الجيدة هناك. أنماط التصميم هي حلول قابلة لإعادة الاستخدام للمشاكل الشائعة في البرمجة. عقب بعضهم سوف تساعدك على بناء تطبيقات جيدة. ومع ذلك، إذا كنت في محاولة لتغطية لهم جميعا هنا، لدى لكتابة كتاب، حتى هنا مجرد أمثلة قليلة منها:

نمط منشئ

استخدم هذا النمط لإنشاء مثيل لنوع كائن معين. إليك مثال على ذلك:

var Class = function(param1, param2) {
    this.var1 = param1;
    this.var2 = param2;
}
Class.prototype = {
    method:function() {
        alert(this.var1 + "/" + this.var2);
    }
};

أو يمكنك محاولة هذا:

function Class(param1, param2) {
    this.var1 = param1;
    this.var2 = param2;
    this.method = function() {
        alert(param1 + "/" + param2);
    };
};

var instance = new Class("value1", "value2");

نمط الوحدة النمطية

يمنحنا نمط الوحدة النمطية القدرة على إنشاء أساليب خاصة وعامة. على سبيل المثال ، في التعليمة البرمجية أدناه ، يكون المتغير _index والطريقة privateMethod خاصتين. الزيادة و getIndex هي عامة.

var Module = (function() {
    var _index = 0;
    var privateMethod = function() {
        return _index * 10;
    }
    return {
        increment: function() {
            _index += 1;
        },
        getIndex: function() {
            return _index;
        }
    };      
})();

نمط المراقب

أينما ترى الاشتراك أو إرسال الأحداث ، من المحتمل أن ترى هذا النمط. هناك مراقبون مهتمون بشيء متعلق بجسم معين. بمجرد حدوث الإجراء ، يقوم الكائن بإعلام المراقبين. يوضح المثال أدناه كيف يمكننا إضافة مراقب إلى كائن المستخدمون:

var Users = {
    list: [],
    listeners: {},
    add: function(name) {
        this.list.push({name: name});
        this.dispatch("user-added");
    },
    on: function(eventName, listener) {
        if(!this.listeners[eventName]) this.listeners[eventName] = [];
        this.listeners[eventName].push(listener);
    },
    dispatch: function(eventName) {
        if(this.listeners[eventName]) {
            for(var i=0; i&lt;this.listeners[eventName].length; i++) {
                this.listeners[eventName][i](this);
            }
        }
    },
    numOfAddedUsers: function() {
        return this.list.length;
    }
}

Users.on("user-added", function() {
    alert(Users.numOfAddedUsers());
});

Users.add("Krasimir");
Users.add("Tsonev");

تعمل تسلسل نمط

هذا النمط طريقة لطيفة لتنظيم الواجهة العمومية من الوحدة النمطية الخاصة بك. أنه يوفر الوقت ويحسن القراءة:

var User = {
    profile: {},
    name: function(value) {
        this.profile.name = value;
        return this;
    },
    job: function(value) {
        this.profile.job = value;
        return this;
    },
    getProfile: function() {
        return this.profile;
    }
};

var profile = User.name("Krasimir Tsonev").job("web developer").getProfile();
console.log(profile);

أوصي بشدة التحقق من هذا الكتاب عن طريق Addy Osmani. إنه أحد أفضل الموارد التي يمكنك العثور عليها حول أنماط التصميم في JavaScript.

الأصول-حزمة

الآن بعد أن اقتربنا من نهاية هذه المقالة ، أريد مشاركة بعض الأفكار حول إدارة شفرة CSS وجافا سكريبت على الخادم. وأسلوب شائع جداً لإضافة دمج، مينيفيكيشن، وترجمة في منطق التطبيق. وكثيراً ما توجد بعض إليه نوع من التخزين المؤقت، ولكن كل الأمور التي تحدث أثناء وقت التشغيل. لذلك ربما يكون لديك بعض منطق الكود ، الذي يعالج طلب ملفات .js أو .css ويخدم المحتوى المناسب. وراء هذه العملية ، فإن التجميع أو الضبط أو أي شيء تستخدمه لتعبئة أصولك.

في آخر مشاريعي ، استخدمت أداة تسمى asset-pack. من المفيد حقًا وسأشرح بالتفصيل ما يفعله بالضبط ، ولكن الجزء الأكثر إثارة هو كيفية استخدامه. هذه المكتبة هو المقصود أن تستخدم فقط في وضع التنمية وأنها لا شيء يبقى في تعليمات البرمجة الأساسية الخاصة بك وأنها ليست شيئا ينبغي أن تقوم بنشر على خادم الإنتاج.

الفكرة استخدام في باكر فقط بينما كنت تعمل على الأصول (المغلق، شبيبة). أنها فعلا والساعات للتغيرات في الدلائل المحددة ويجمع/حزم التعليمة البرمجية في ملف واحد. باستخدام هذا النهج ، لا تحتاج إلى التفكير في التنقيح أو التحويل البرمجي. كل ما عليك القيام به هو فقط إرسال الملف الثابت المترجمة إلى المستخدم. وهذا يزيد أداء التطبيق الخاص بك، لأنها لا تخدم سوى الملفات الثابتة وطبعا يجعل الأمور أكثر بساطة. لا تحتاج لتعيين أي شيء على الخادم الخاص بك أو تطبيق منطق لا لزوم لها.

فيما يلي كيفية إعداد حزمة الأ assets-pack.

التثبيت

هذه الأداة هي وحدة Nodejs ، لذلك يجب أن يكون لديك عقدة مثبتة بالفعل. إذا لم تقم بذلك ، فما عليك سوى الانتقال إلى nodejs.org/download والاستيلاء على الحزمة لنظام التشغيل الخاص بك. بعد ذلك:

1	npm install -g assetspack

الاستخدام

تعمل الوحدة مع تهيئة JSON. عند استخدامه عبر سطر الأوامر ، يجب عليك وضع إعداداتك في ملف .json.

عن طريق سطر الأوامر

قم بإنشاء ملف assets.json وتنفيذ الأمر التالي في نفس الدليل:

1	assetspack

إذا كان ملف التكوين الخاص بك يستخدم اسمًا آخر أو في دليل آخر ، فاستخدم:

1	assetspack --config [path to json file]

في التعليمات البرمجية

var AssetsPack = require("assetspack");
var config = [
    {
        type: "css",
        watch: ["css/src"],
        output: "tests/packed/styles.css",
        minify: true,
        exclude: ["custom.css"]
    }
];
var pack = new AssetsPack(config, function() {
    console.log("AssetsPack is watching");
});
pack.onPack(function() {
    console.log("AssetsPack did the job"); 
});

التكوين

يجب أن يكون التكوين ملف / كائن JSON صالحًا. إنها مجرد مجموعة من الكائنات:

[
    (asset object),
    (asset object),
    (asset object),
    ...
]

الكائن الأصل

يشبه الهيكل الأساسي لعنصر مادة العرض ما يلي:

{
    type: (file type /string, could be css, js or less for example),
    watch: (directory or directories for watching /string or array of strings/),
    pack: (directory or directories for packing /string or array of strings/. ),
    output: (path to output file /string/),
    minify: /boolean/,
    exclude: (array of file names)
}

خاصية الحزمة ليست إلزامية. إذا كنت أفتقد ، فإن قيمتها تساوي المشاهدة. تصغير بشكل افتراضي غير صحيح.

وإليك بعض الأمثلة:

حزم CSS

{
    type: "css",
    watch: ["tests/data/css", "tests/data/css2"],
    pack: ["tests/data/css", "tests/data/css2"],
    output: "tests/packed/styles.css",
    minify: true,
    exclude: ["header.css"]
}

جافا سكريبت التعبئة

{
    type: "js",
    watch: "tests/data/js",
    pack: ["tests/data/js"],
    output: "tests/packed/scripts.js",
    minify: true,
    exclude: ["A.js"]
}

التعبئة`.less` الملفات

تعبئة الملفات .less مختلفة قليلاً. خاصية الحزمة إلزامية وهي أساسًا نقطة دخولك. يجب عليك استيراد كافة الملفات .less. خاصية الاستبعاد غير متاحة هنا.

{
    type: "less",
    watch: ["tests/data/less"],
    pack: "tests/data/less/index.less",
    output: "tests/packed/styles-less.css",
    minify: true
}

إذا وجدت أي مشاكل ، يرجى التحقق من الاختبارات / packing-less.spec.js من المستودع في GitHub.

التعبئة تنسيقات ملف أخرى

الأصول-حزمة يعمل مع أي تنسيق ملف. على سبيل المثال، يمكننا دمج قوالب HTML في ملف واحد بالقيام بشيء من هذا القبيل:

{
    type: "html",
    watch: ["tests/data/tpl"],
    output: "tests/packed/template.html",
    exclude: ["admin.html"]
}

الشيء الوحيد الذي يجب أن تعرفه هنا هو أنه لا يوجد أي تعديل.

الاستنتاج

كمطوري ويب أماميين ، يجب أن نحاول تقديم أفضل أداء ممكن لمستخدمينا. النصائح أعلاه ليست من المفترض أن تغطي جميع جوانب تنظيم الأصول والأداء، ولكن هم الذين يستطيعون التعامل مع شخصيا أثناء عملي اليومي. الرجاء لا تتردد في حصة بعض النصائح الخاصة بك أدناه، في التعليقات.