۴ روش برای استفاده ی کمتر از CSS در فریم ورک Sencha Touch

css در فریم ورک سنچا تاچ

بهینه سازی در وب اپلیکیشن های حجیم امروزی امریست ضروری. بهینه سازی ابعاد مختلفی دارد که یکی از آنها رعایت مواردی جهت کم کردن حجم کامپوننت های ظاهری برنامه است. فریم ورک جاوا اسکریپتی sencha touch هم از این قضیه مستثنی نیست و کامپوننت های آن در کنار ظاهر و کارایی فوق العاده حجم بالایی هم دارند. روش های بهینه سازی زیر کمک می کند تا وب اپلیکیشن سبک تر و سریعتری داشته باشید.

 

اخیرا در حال بهینه سازی اپلیکیشنی بودم که با فریم ورک Sencha Touch  نوشته شده بود و بارگذاری آن بر روی دستگاهی که سیستم عامل اندروید x.2 داشت، بیش از ۵ ثانیه طول کشید. این اپلیکیشن یک فایل ۱٫۲ مگابایتی app.css بود که من توانستم آن را به حجم ۱۰۰ کیلوبایت برسانم و مشکل را حل کنم. در اینجا می خواهم ۴ تکنیکی که برای رسیدن به این هدف به کار بردم را ارائه دهم.

۱٫ از تکرار import@ اجتناب کنید

نتیجه : از تبدیل ۱٫۲۳ مگابایت به ۲۵۳ کیلوبایت

این یک اشتباه رایج است و به مراتب بزرگ ترین تاثیر را بر روی افزایش حجم CSS دارد. شما به طور پیش فرض یک فایل app.scss دارید که این دو خط را دارا می باشد:

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

شما می توانید تمام کار ها را در این فایل انجام دهید. اما برای استفاده از آن در یک اپلیکیشن با هر اندازه ای، نیاز به شکستن این فایل خواهید داشت. باید برخی از کدها را در یک فایل جداگانه نوشته و سپس آن را با افزودن خط زیر به آن، مجددا به app.scss خود import کنید:

@import 'MySeparateFile';

شما مجاز به import مجدد ‘sencha-touch/defualt’ و ‘sencha-touch/default/all’ به درون MySeparateFile.scss نیستید. به یاد داشته باشید که این کار باعث می شود تمام CSS های تولید شده در app.css نهایی قرار گیرند. در اپلیکیشنی که من در حال کار با آن بودم، import های مکرر و تکراری بارها در فایل های custom شده ی .scss انجام شده بود و باعث حجمی برابر با تقریبا یک مگا بایت از CSS شده بود.

۲٫ فونت ها و آیکون های پیش فرض را حذف کنید

نتیجه: از ۲۵۳ کیلوبایت به ۱۵۶ کیلوبایت

فریم ورک جاوا اسکریپت Sencha Touch  از فونت های وب برای آیکون ها استفاده می کند و به طور پیش فرض تمام یک مجموعه ی ۱۰۰ آیکونی به درون app.css کامپایل شده، گنجانده می شود. اگر شما از آیکون های custom یا دلخواه خود استفاده می کنید، نیازی به این کار ندارید. خوشبختانه می توان این عمل را با تنظیم متغیر های زیر در app.scss خود، غیر فعال نمود:

$include-pictos-font: false;
$include-default-icons: false;

برای درک بهتر تفاوت بین این دو گزینه، پیشنهاد می کنم که به کد منبع scss. در پوشه ی منابع Sencha Touch نگاه کنید. اگر از کامپوننت هایی مانند فیلد های search یا select استفاد می کنید که از آیکون های پیش فرض برای رفتار های پیش فرض خود استفاده می کنند، باید scss. آنها را override کنید تا بتوانید آیکون هایی با فونت دلخواه خود استفاده کنید.

۳٫ CSS های آزمایشی را حذف کنید

نتیجه: از ۱۵۶ کیلوبایت به ۱۴۴ کیلوبایت

همان طور که می دانید CSS های آزمایشی فراوانی وجود دارد که Compass نه تنها برای سازگار کردن ویژگی های پیشوند دار آزمایشی و واقعی مرورگرهای رایج، بلکه برای به حساب آوردن طیف اندکی از مرورگرهایی که شما از آنها پشتیبانی نمی کنید، تولید می کند. تمام کاری که باید انجام دهید، افزودن خطوط زیر به app.scss خود است:

$experimental-support-for-mozilla : false;
$experimental-support-for-webkit : false;
// $support-for-original-webkit-gradients : false;
$experimental-support-for-opera : false;
$experimental-support-for-microsoft : false;
$experimental-support-for-khtml : false;

توجه داشته باشید که من چگونه خط سوم را غیر فعال کردم. اپلیکیشن من از یک select field (یعنی aka combo box) برای پشتیبانی از Android 2.x استفاده می کرد که از گرادیانت های قدیمی webkit برای رسیدن به این امر در سناریو های فشرده استفاده می کرد:
20130614-optimizing-touch-css-1

اگر خط سوم را فعال کرده و مجددا کامپایل نمایم، شکل زیر را خواهم دید:

20130614-optimizing-touch-css-2

۴٫ Touch SASS های بلا استفاده را حذف کنید

نتیجه: از ۱۴۴ کیلوبایت به ۱۲۰ کیلوبایت

درست مانند زمانی که وابستگی های کلاس در Touch به ما این امکان را می دهد که یک فایل جاوا اسکریپت را تنها با بخش های مورد نیاز خود از فریم ورک کامپایل کنیم، می توانیم با CSS هم به همین نتیجه دست یابیم که البته به تلاش بیشتری نیاز دارد. ممکن است نیاز داشته باشید که به منبع SASS مراجعه کنید تا آن مرحله را به خوبی اجرا نمایید. برای مثال، فایل SASS برای فیلد های select از mixin هایی استفاده می کند که در فایل SASS برای checkbox ها تعریف شده اند. به عبارت دیگر، اگر اپلیکیشن شما از checkbox استفاده نمی کند، با فرض اینکه نمی خواهید بقیه ی SASS مربوط به checkbox را در اپلیکیشن خود قرار دهید، باید mixin مربوط به آن را از فایل sacc. آن خارج کنید.

فایل پیش فرض app.scss دارای این دو خط است:

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

کد منبع برای این فایل ها در زیر قرار دارد:

touch2.2/resources/themes/stylesheets/sencha-touch/_default.scss
touch2.2/resources/themes/stylesheets/sencha-touch/default/_all.scss

اگر شما منبع را دنبال کنید، فایل اول مقداری فایل scss. را از پوشه ی “var” وارد می کند که متغیر های مختلف SASS را تنظیم و راه اندازی می کند. احتمالا باید این فایل را نگه دارید.

فایل دوم SASS واقعی را که توسط هر یک از کامپوننت ها به کار رفته است را import می کند که چیزی شبیه به این خواهد بود:

...
@import 'Button';
@import 'Panel';
@import 'Sheet';
@import 'MessageBox';
@import 'Toolbar';
@import 'carousel/Carousel';
@import 'form/Panel';
...

آسان ترین راه برای انجام این کار، حذف کلمه ی “all” از app.scss میباشد:

// @import 'sencha-touch/default/all';

و به جای آن باید import هایی که از all.scss_ انجام شده است، قرار گیرد. به عبارت دیگر، اگر شما در اپلیکیشن خود تنها از message box و toolbarاستفاده می کنید، باید موارد زیر را به app.scss اضافه کنید:

@import 'MessageBox';
@import 'Toolbar';

هنگامی که قصد کامپایل کردن آن را دارید، احتمالا باید به موارد مربوط به مسیر یابی (pathing) بپردازید. موارد زیر را فیکس کنید:

@import 'sencha-touch/default/src/_MessageBox.scss'; 
@import 'sencha-touch/default/src/_Toolbar.scss';

نتیجه:

این تکنیک ها مربوط به عملکرد اپلیکیشن بوده و می تواند بارگذاری صفحه ی آغازین اپلیکیشن را، بدون تاثیر گذاری بر موارد بصری و کارایی، چند ثانیه سرعت بخشد. در دستگاه های قدیمی که دارای اتصالات Edge می باشند، صرفه جویی در زمان می تواند ۱۰ ثانیه نیز بیشتر باشد. کاربران احساسات ماندگار خود را در همان اولین ثانیه های تجربه ی کار با اپلیکیشن شما به دست می آورند؛ اجازه ندهید که اولین تجربه ی آنها بارگذاری یک آیکن “در حال بارگذاری…” باشد.

میلاد خان محمدی

Author: میلاد خان محمدی

پژوهشگر, نویسنده و علاقه مند به تکنولوژی های مختلف وب علی الخصوص front end هستم، مدیر دپارتمان هایبرید اپلیکیشن در موسسه ی iShia

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *