[Phonegap+Sencha Touch][转] 移动开发33 四招减小Sencha touch项目css文件的体积
2014-10-10 13:43
591 查看
英文原文:《4 Tricks for Smaller CSS in Sencha Touch 2.2》
太长,懒得翻译了,基本都能看懂
I recently had the pleasure of optimizing an app written in Sencha Touch 2.2 that was taking over 5 seconds to load on an Android 2.x device. The culprit was a 1.2 MB app.css file that I managed to bring down to just over 100 kB, resolving the issue. Here I
present four techniques used to achieve this goal, along with individual outcome metrics. As a precursor to this article, I highly recommend that you read the Sencha
Touch Theming Guide.
This is a common mistake and by far the biggest impact on CSS bloat. By default, you have an app.scss file that has these two lines:
You can do all your work in this file, but with an app of any size you will soon need to split this up. You will write some of your code in a separate file and then import that separate file back into your app.scss by adding the following line to it:
Inside MySeparateFile.scss, you should not re-import the ‘sencha-touch/default’ and ‘sencha-touch/default/all’. Bear in mind that this causes any generated CSS to be re-included in the final app.css. In my app, the redundant import was repeated multiple times
in custom .scss files, resulting in almost a megabyte of CSS bloat.
Sencha Touch 2.2 uses web fonts for icons and by default the entire set of nearly 100 icons are base64-jammed into the compiled app.css. If you’re using custom icons, you probably don’t need this. Luckily, this is very easy to turn off by setting the following
variables in your app.scss:
For a better understanding of the difference between these two options, I suggest you dive into the .scss source code in the Sencha Touch resources folder. If you’re using components like search fields or select fields, which use default icons for their default
behavior, you might need to override their .scss to use icons from your custom font.
This Compass article explains the concept very well. In summary, there is a lot of “experimental”
CSS that Compass generates to accommodate not only the actual experimental prefixed features of common browsers, but to also account for “minority” browsers that you probably aren’t supporting anyway. All you have to do is add the following in your app.scss:
Notice how I commented out the 3rd line. My app was using a select field (aka combo box) for Android 2.x support, which uses old-style webkit gradients to achieve this effect in compact scenarios:
If I were to uncomment the 3rd line and recompile, I would see:
Similar to how the class dependencies in Touch allow us to compile a JavaScript file with only the parts of the framework we need, we can achieve the same effect with CSS, albeit with more effort. I should warn you: you will probably need to dive into SASS
source to effectively perform this step. For instance, the SASS file for select fields uses mixins defined in the SASS file for checkboxes. This means if your app is not using checkboxes, you might want to extract that mixin from the checkbox’s .scss file,
assuming you don’t want to include the rest of the checkbox SASS.
Let’s recap; the default app.scss has these two lines:
The source code for these files is located in:
If you follow the source, the first file pretty much imports a bunch of .scss files from the “var” folder, which sets up various SASS variables. You will probably want to keep this file.
The second file imports the actual SASS used by individual components; it looks something like this:
The easiest way to go about this task is to take out “all” from your app.scss:
…and in its place put the individual imports from _all.scss; i.e. if you only use message boxes and toolbars in your app, you would add the following to app.scss:
When you try to compile this, you will likely run into some pathing issues. Fix:
欢迎加入Sencha Touch + Phonegap 群:194182999
共同学习交流(博主QQ:479858761)
太长,懒得翻译了,基本都能看懂
I recently had the pleasure of optimizing an app written in Sencha Touch 2.2 that was taking over 5 seconds to load on an Android 2.x device. The culprit was a 1.2 MB app.css file that I managed to bring down to just over 100 kB, resolving the issue. Here I
present four techniques used to achieve this goal, along with individual outcome metrics. As a precursor to this article, I highly recommend that you read the Sencha
Touch Theming Guide.
Avoid Redundant @import【不要重复@import scss文件】
Result: 1.23 MB -> 253 kB
This is a common mistake and by far the biggest impact on CSS bloat. By default, you have an app.scss file that has these two lines:@import 'sencha-touch/default'; @import 'sencha-touch/default/all';
You can do all your work in this file, but with an app of any size you will soon need to split this up. You will write some of your code in a separate file and then import that separate file back into your app.scss by adding the following line to it:
@import 'MySeparateFile';
Inside MySeparateFile.scss, you should not re-import the ‘sencha-touch/default’ and ‘sencha-touch/default/all’. Bear in mind that this causes any generated CSS to be re-included in the final app.css. In my app, the redundant import was repeated multiple times
in custom .scss files, resulting in almost a megabyte of CSS bloat.
Exclude Default Font and Icons【不要用默认自带的字体图标】
Result: 253 kB -> 156 kB
Sencha Touch 2.2 uses web fonts for icons and by default the entire set of nearly 100 icons are base64-jammed into the compiled app.css. If you’re using custom icons, you probably don’t need this. Luckily, this is very easy to turn off by setting the followingvariables in your app.scss:
$include-pictos-font: false; $include-default-icons: false;
For a better understanding of the difference between these two options, I suggest you dive into the .scss source code in the Sencha Touch resources folder. If you’re using components like search fields or select fields, which use default icons for their default
behavior, you might need to override their .scss to use icons from your custom font.
Exclude Experimental CSS【去除不需要支持的css前缀,比如-o-、-moz-】
Result: 156 kB -> 144 kB
This Compass article explains the concept very well. In summary, there is a lot of “experimental”CSS that Compass generates to accommodate not only the actual experimental prefixed features of common browsers, but to also account for “minority” browsers that you probably aren’t supporting anyway. All you have to do is add the following in your 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;
Notice how I commented out the 3rd line. My app was using a select field (aka combo box) for Android 2.x support, which uses old-style webkit gradients to achieve this effect in compact scenarios:
If I were to uncomment the 3rd line and recompile, I would see:
Exclude Unused Touch SASS【去除没有用到的组件scss】
Result: 144 kB -> 120 kB
Similar to how the class dependencies in Touch allow us to compile a JavaScript file with only the parts of the framework we need, we can achieve the same effect with CSS, albeit with more effort. I should warn you: you will probably need to dive into SASSsource to effectively perform this step. For instance, the SASS file for select fields uses mixins defined in the SASS file for checkboxes. This means if your app is not using checkboxes, you might want to extract that mixin from the checkbox’s .scss file,
assuming you don’t want to include the rest of the checkbox SASS.
Let’s recap; the default app.scss has these two lines:
@import 'sencha-touch/default'; @import 'sencha-touch/default/all';
The source code for these files is located in:
touch2.2/resources/themes/stylesheets/sencha-touch/_default.scss touch2.2/resources/themes/stylesheets/sencha-touch/default/_all.scss
If you follow the source, the first file pretty much imports a bunch of .scss files from the “var” folder, which sets up various SASS variables. You will probably want to keep this file.
The second file imports the actual SASS used by individual components; it looks something like this:
... @import 'Button'; @import 'Panel'; @import 'Sheet'; @import 'MessageBox'; @import 'Toolbar'; @import 'carousel/Carousel'; @import 'form/Panel'; ...
The easiest way to go about this task is to take out “all” from your app.scss:
// @import 'sencha-touch/default/all';
…and in its place put the individual imports from _all.scss; i.e. if you only use message boxes and toolbars in your app, you would add the following to app.scss:
@import 'MessageBox'; @import 'Toolbar';
When you try to compile this, you will likely run into some pathing issues. Fix:
@import 'sencha-touch/default/src/_MessageBox.scss'; @import 'sencha-touch/default/src/_Toolbar.scss';
欢迎加入Sencha Touch + Phonegap 群:194182999
共同学习交流(博主QQ:479858761)
相关文章推荐
- [Phonegap+Sencha Touch] 移动开发14 创建wp8项目失败的解决办法
- [Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题
- [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置
- [Phonegap+Sencha Touch] 移动开发71 Sencha项目开发、调试方法建议
- [Phonegap+Sencha Touch] 移动开发56 安卓要注意不同CPU指令集的第三方.so库文件的引用
- [Phonegap+Sencha Touch] 移动开发9、scss编译成css,如何去除-moz-、-o-、-ms-前缀
- [Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题
- [Phonegap+Sencha Touch] 移动开发14 创建wp8项目失败的解决办法
- [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置
- [Phonegap+Sencha Touch] 移动开发9、scss编译成css,如何去除-moz-、-o-、-ms-前缀
- [Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题
- [Phonegap+Sencha Touch] 移动开发26 Android下的sencha touch程序,转屏时,Ext.Viewport不能触发orientationchange事件的解决办法
- [Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,运行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决办法
- [Phonegap+Sencha Touch] 移动开发22、安卓4.0.X的webview或自带浏览器中,去除输入框外面的蓝色边框
- [Phonegap+Sencha Touch] 移动开发4、Sencha Touch初步使用
- [Phonegap+Sencha Touch] 移动开发21 Sencha touch tapHold事件 触发时间太长的解决办法
- [Phonegap+Sencha Touch] 移动开发29 安卓navigator.camera.getPicture得到图片的真实路径
- [Phonegap+Sencha Touch] 移动开发17 使用桌面版chrome调试安卓设备上的chrome和webview
- [Phonegap+Sencha Touch] 移动开发13 禁止Sencha Touch容器控件越界滚动
- [Phonegap+Sencha Touch] 移动开发27、禁用iOS系统的webapp电话号码自动识别