微信公众号上运行的前端代码精简压缩,优化加载速度,提升用户体验——grunt+requireJS

背景:
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