背景：
1. grunt编译压缩，requireJS加载
2. css编译压缩成单独的min.css文件，大小：384kb
3. js编译压缩成单独的min.js文件，大小：562kb
4. 调用了第三方统计JS
一、停用第三方统计JS
后续可以考虑如下方式来加载：
通常我们的网站里面会加载一些js代码，如：统计，google广告一堆，最后弄得页面加载速度很慢。
解决办法：换一个js包含的方式，让javascript加载速度倍增。
把通常加载方式：
<script src=”xxxx.js”></script>
改变成：
<script type=”text/javascript”>
document.write(“<scr”+”ipt src=\”xxx.js\”></sc”+”ript>”)
</script>
还可实现按需按条件的来加载你要的JS文件：
<script type=”text/javascript”>
if (需要) {document.write(“<scr”+”ipt src=\”xxx.js\”></sc”+”ript>”)}
</script>
这样要是不“需要”，就自然不会载入你不需要的JS文件了。
二、CSS文件精简压缩：
1. icons 采用cdn方式调用：http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
2. 手动删除框架css中不需要的标签和文件
3. 使用压缩工具进行压缩：http://tool.lu/css （用优化不要用压缩）
成果：384kb -> 126kb
三、JS文件精简压缩：
1. 手动删除框架js中不需要的对象和方法，包括Framework7、ChartJS
2. 手动删除代码中暂时不用的方法和文件
成果：562kb -> 320kb
四、RequireJS加载机制调整：（require.js用法参考阮一峰的文章 http://www.ruanyifeng.com/blog/2012/11/require_js.html）
1. 延迟加载 <script src=”js/require.js” defer async=”true” ></script>
2. 浏览器加载一个大文件比加载n个小文件的效率要高很多，所以模块的合并对性能也有很大的提高。
3. Chart 精简压缩版 通过另外引用的方式（类cdn方式）加载，不使用optimizer编译到打包文件中。（参考：http://requirejs.org/docs/optimization.html#empty）
4. weixin js 通过cdn方式加载。
五、图片、字体等文件压缩调整。
参考：
1. http://www.cnblogs.com/gxbk629/p/4305092.html
2. requireJs的加载是一种异步机制，它加载js的时候有个默认的超时机制，当加载一个js超过一定时间的时候，它就会在浏览器中抛出模块加载超时错误，接下来，就不会加载这个模块。
这个机制其实是起到了节省资源的作用，就是不会一直处于加载模块中，但是当遇到网速很慢的时候，加载本来就慢，就会导致js加载不出来。其实requireJs有个配置项，叫waitSeconds，指在放弃加载一个脚本之前等待的秒数，设为0禁用等待超时，默认为7秒。现在很明显了，为解决这个问题可以讲，waitSeconds设置为0，或者为一个很大的秒数。
3. http://requirejs.org/docs/optimization.html#empty
欢迎关注我的微信公众号：
如无特殊说明，文章均为本站原创，转载请注明出处！