在业务中，我们常常会遇到一个场景：同一套web业务代码要在多平台下执行其对应的不同职能。这样很容易出现两个问题：代码里“尸横遍野”的环境判断和分支，提高了代码维护难度；执行环境下载了其他环境的功能代码，造成了资源的浪费。只要我们合理使用Webpack的Tree-shaking功能，就可以很好地解决问题。
一、需求背景
不以解决实际问题为目标的技术实践都是耍流氓 —— shijisun
需求
出现一套Web代码在多个平台下执行需要实现不同功能的问题，功能包括但不限于：数据加载、展示样式、用户交互等。
例如，腾讯课堂H5课程详情页需要承载起H5、App、PadApp、小程序等多平台的页面功能，以该页面在H5和App两个环境下的对比为例：
对比 项 | H5 | App |
|---|---|---|
数据加载 | CGI数据 | 首屏从App加载数据，并行加载CGI数据，竞速关系 |
功能组件 | 全量展示 | 不展示播放器、目录、推荐课程等模块，同时老师模块展示样式/用户交互不一样 |
版本判断 | 不需要版本判断 | 依赖App版本开启分销、砍价、拼团、打卡等功能 |
用户反馈 | 功能完全由H5实现 | 切换班级、支付保障浮层展示、查看课详图片、跳转打卡小程序等功能需要依赖Native原生组件 |
存在问题
1、代码里“尸横遍野”的环境判断和分支，提高了代码维护难度；
2、执行环境下载了其他环境的功能代码，造成了资源的浪费；
问题到底有多严峻呢？请看下面实际生产环境代码的截图
