京东PLUS会员项目前端性能优化实践

京东PLUS会员项目是国内第一个电商付费会员项目，正式开通的会员数量已破千万。我团队从年接手这个项目的前端开发工作，一路见证了它的高速成长，也为此贡献了自己的力量。

这个项目有几个特点：

第一，需求多。移动端使用H5开发，曾有人问为什么不用原生或者RN开发?我觉得吧，以这个项目的需求数量和迭代速度来看，连H5都难以hold的住，还是不要奢望原生和RN了。

第二，产品经理多。一般的项目对接一两个产品经理，这个项目我们需要对接一个异地的产品经理“团队”；一般的项目换产品经理一个一个的换，这个项目一批一批的换……我们已经送走好几届PLUS会员产品经理了。铁打的研发，流水的产品经理。

所以说，PLUS会员项目是业务方滴，也是项目经理滴，还是产品经理滴，但终归是俺们研发滴。每念及此，我的耳边总会响起叶倩文的那首老歌：“天地悠悠，过客匆匆，潮起又潮落...”。

书归正传。用户众多和需求迭代频繁，确保线上安全稳定始终是第一要务。所以在架构调整和性能优化方面我们一直都小心翼翼，以一些小修小补为主，只有到大规模改版的时候才会有大的升级改造。不过，平时我们对这些问题的思考和实践却不曾停止过，我们验证了一些行之有效的优化方案，在下一波改版中将会得到应用。

我虽然不完全认同“前端开发每十八个月难度翻一倍”的说法，但这一行发展迭代速度快却是不争的事实。若等到这些优化方案全都应用上再出来念叨，可能就显得不那么新鲜了。所以，我决定先把这些方案拿出来分享，和感兴趣的小伙伴一起讨论，进一步完善。

这些方案主要针对移动端，优化核心方向是提高首页的加载速度，特别是首屏和弱网络环境下的加载速度。从持久化缓存、削减代码量、优化接口请求、提升主观感受等方面下手，比较大的改动是应用PWA和升级架构。PWA离线缓存可以极大的提升用户体验，不过它对于首次加载速度并无提升作用，还得靠其他优化手段，这是一套组合拳。我们先从架构升级说起吧。

项目计划迁移到Gaea4.0脚手架[1]，这是我们团队基于webpack4开发的一套通用Vue单页面应用脚手架，此前的系列版本已经过数十个项目的验证，还是比较稳定的。近期新推出4.0版相较之前版本有着不小的改进。

webpack升级到了4.0

Babel升级到了7.0

Vue-loader升级到了15

重构了上传插件，一键上传到测试服务器更快更稳定

针对我厂手机和电脑位于不同局域网无法互访的问题，集成了自主研发的Carefree解决方案[2]，方便真机测试调试

集成了NutUI组件库[3]，可按需加载需要的UI组件

集成了自主研发的基于swagger的数据mock工具SMOCK[4]

支持自动生成骨架屏[5]

支持PWA

…

迁移有几个主要目的：

首先，实现本项目的webpack构建工具升级到4.0，之前是基于webpack2.0开发的，webpack4有不少提升，比如：

ScopeHoisting(作用域提升，webpack3加入)，通过减少闭包函数数量加快JS的执行速度

生产环境构建体积更小

开发环境通过优化的增量构建机制提升构建速度，同时提供详细的错误和提示

其次，Gaea4.0的Babel是7.0版的，基于Babel7可以实现更智能的Babelpolyfill按需加载。

再次，本次优化计划尝试的PWA、骨架屏等方案，Gaea4.0都可以给予基础支持。

最后，Gaea4.0集成的Carefree、新的上传插件等功能将给未来的开发和真机调试带来方便。

如今的web应用开发都是在本地进行构建，所以有条件在构建阶段把高版本的JS代码编译成低版本语法，这样既使用了新语法，又解决了低版本浏览器的兼容问题。承担这种转换工作的最知名的工具当属Babel了。而一直以来，Babel有个饱受诟病的地方，那就是polyfill问题。

Babel默认只转换JavaScript语法，而不转换新的API，比如Promise、Generator、Set、Maps、Symbol等全局对象，一些定义在全局对象上的方法（比如Object.assign）也不会被转码。如果想让未转码的API可在低版本环境正常运行，这就需要使用polyfill。

polyfill有多种方案，各有各的问题。目前应用中通常使用babel-polyfill方案，而第三方库中通常使用babel-runtime和babel-plugin-transform-runtime方案。

babel-polyfill提供完整的环境垫片，包含所有API的降级模块，可以为新的API和全局对象上的方法提供兜底，其主要缺点是文件较大，压缩后大概八九十KB。目前项目中采用这种方案，这次考虑予以优化，减少加载的代码体积。

如上文提到，这一波改造会把项目迁移到Gaea4.0脚手架中，新脚手架的Babel已经升级到了最新的7.0版。Babel7是Babel6推出近三年之后发布的一个断崖式升级的大版本，包含很多新特性，其中一个引人







































治疗白癜风效果如何
白癜风的症状及治疗

转载请注明：http://www.qianzhongdushijian.com/jdjz/3560.html

• 上一篇文章： 给前端开发的6点建议
  
• 下一篇文章： 脱发小贴士前端开发工程师代码重构