js合并优化实践

http1.1时代,js资源合并(bundling optimization)仍是一个必要的实践。

我们在发版前会将入口模块引用的模块打包为一个js,但是对于重用度高的类库如jQ等,如果都合并进来就不太合适了,因为这部分模块改动频率不高,独立加载可发挥浏览器缓存的优势(图1),

所以对打包的工具r.js做了个小改动(图2),打合并包时判断模块尺寸,如果超过20k(经验值),就突出显示,供优化参考;

执行打包命令的效果(图3),可以看出,在某个入参加密需求中引入的rsa模块由于几乎全局引用到,文件尺寸50k被打入所有包中,这个就应该抽离出来单独加载

前后打包尺寸对比:(图4,图5)通过对比可以看出效果还是比较明显的。

————————————

分享这个小技巧其实并没啥高深的东东,但从数据来看,产出是正向的,这就所谓“因上努力”。下一篇介绍个监控数据收集的思路,结果上咱们也主动一把。

分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理