这是16年的一篇笔记，技术也许已经有过时的，再做这方面的优化的时候将会更新此文（2018.10）
参考和引用的资料来源
ng-book 权威指南 ch32 优化Angular应用
网络资源： 分析小米页面
css方面
字体问题
google字体在国内被block，替换成360提供的useso
再三确认网络字体是否真正需要，不需要的化直接注释掉
FontSpider
于是 “字蛛(FontSpider)” 这款工具可以粉墨登场啦（别乱用成语啊亲~）—— 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
页面字体效果切换的闪动（FOUT——flash of unstyled text）现象。
通过将字体的声明部分inline到页面中，而不是通过文件请求，可以将其转化为base64编码
js第三方lib库
比如jquery，angualr，underscore，等常见库，使用cdn加速。
可供选择的加速网站：
- sinaapp http://lib.sinaapp.com/js/angular.js/angular-1.2.19/
- 360前端
- 又拍云前端
- cdnjs
/cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/ - 百度cdn开源项目
自定义的css和js，上传到云存储加速
- 收费： 又拍云
- 免费：七牛
angular中
利用$templateCache
使用XHR加载模板可能会导致Web应用缓慢或者有卡顿的感觉。可以通过将模板包装为JavaScript文件,然 后连同应用程序的其他部分一起传输的方式伪造模板缓存加载,而不是通过XHR提取模板。
即：将模版的html转化为js脚本载入并缓存，而且不再通过xhr加载，加快了页面载入速度。
原理与工具
默认情况下,Angular无法从本地$tempalteCache中找到模板时,会通过XHR提取模板。当 XHR请求很慢,或者模板很大时,它可能会对应用的用户体验造成很大的负面影响。
你可以通过“伪造”$templateCache已经被填充的方式来避免这一延迟,这样Angular就不必 从远程加载模板。可以在JavaScript中手动实现这个技巧,就像这样:
angular.module('myApp',\[])
.run(function($templateCache) {
$templateCache.put('home.html', 'This is the home template');
});
现在,当Angular需要提取名为home.html的模板时,它会在$templateCahce中找到它,而无需从服务器提取。
如果想为服务器打包应用,手动处理的步骤就会很繁琐。幸好,grunt-angular-templates 这个Grunt任务可以帮我们完成。
资源文件的压缩整套流程
grunt.registerTask('dist',['clean', 'ngAnnotate', 'copy', 'cssmin','concat', 'uglify', 'targetHtml', 'htmlmin','clean:post']);
- uglify: 压缩HTML、JavaScript、CSS,甚至是图片。
图片压缩
ui库 自定义裁剪
semantic-ui可以使用gulp工具，自己选择需要的生成dist，应用到生产环境中。
网友评论