如何给框架和JS 库瘦身？

在开发组件库或者插件，经常会需要区分多种环境构建，从而实现：

提供各种「体积」版本：全量版、精简版、基础版等；
提供各种「环境」版本：web 版、nodejs 版等等；
提供各种「规范」版本：esm 规范版本、cjs 规范版本、UMD 规范版本等等。

那么如何能够方便实现上面功能呢？这种场景就适合使用 Feature Flags，在构建过程中，通过开关的启用和关闭，对构建代码的过程进行动态设置，从而更好的实现 Tree Shaking。

Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。

本文会从 Vue 源码(版本号：3.0.11)中使用的 Feature Flags 进行构建的过程开始介绍，然后通过简单示例进行学习，最后介绍 rollup、webpack 和 Vite 中的实现。

一、什么是 Feature Flags

Feature Flag(又名 Feature Toggle、Flip等)是一种允许控制线上功能开启或者关闭的方式，通常会采取配置文件的方式来控制。

http://fex.baidu.com/blog/2014/07/feature-flag/

可以理解为在代码中添加一个开关，当开关开启，则逻辑会执行下去，否则不会执行，通常代码表现形式为 if语句，举个简单示例：

const flags = true;
const test = () => flags && console.log('Hello Feature Flags');

当 flags为 true则执行输出，否则不会。现在我们想控制日志会不会输出，只需改变 flags的值即可，test方法逻辑不用修改。

如何给框架和JS 库瘦身？相关推荐

svn服务端删除版本库_svn历史版本删除(为svn库瘦身)
当svn库庞大到一定程度的时候,无论是在查询还是在备份方面肯定会给我们带来很多不便,以下将先容为svn库瘦身的办法, 简单的说,就是新建一个库,然后把旧库我们所需要查询的一个版本范围的资料搬移过去,具 ...
Vue框架引入JS库的正确姿势
参考自:https://mp.weixin.qq.com/s?src=3&timestamp=1527154113&ver=1&signature=tWGeTa86gyK*RL ...
如何给SVN版本库瘦身
转截请注明来源:http://blog.csdn.net/caoshiying 当svn库庞大到一定程度的时候,无论是在查询还是在备份方面肯定会给我们带来很多不便,对于有把SVN版本库随身携带到移动硬 ...
SVN历史版本删除瘦身svn库
当svn库庞大到一定程度的时候,无论是在查询还是在备份方面肯定会给我们带来很多不便,以下将介绍为svn库瘦身的办法,简单的说,就是新建一个库,然后把旧库我们所需要查询的一个版本范围的资料搬移过去,具体 ...
京东商城iOS客户端安装包瘦身实践
一.概述随着业务的快速增加,商城app的大小也在迅速增加,一度超过了300M.安装包大小的不断增加对app下载成本,推广效率产生了比较大的影响.从2018年9月份我们对商城app开始了为期二期的专项 ...
Android应用瘦身，从18MB到12.5MB
前阵子老大交给了我一个任务,主要是帮我们开发的直播应用做 Android 端的安装包瘦身,花了大概一周的时间把安装包从 18MB 减小到了 12.5MB.原本完全可以优化到 10MB 之下,但由于其他 ...
JS+库+框架+工具
JS+库+框架+工具要做WEB前端,就需要知道前端到底是什么,需要学习那些知识:前端至少要懂的三个部分:HTML,CSS,JavaScript(简称JS),那首先先明确这三个概念: HTML负责结构 ...
MV* 框架与 DOM操作为主 JS库的案例对比
最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库与 MV* 框架的对比案例(MV* 框架与 DOM操作 JS库实例对比) 购物车页面 ...
Android App 瘦身总结第二章 jni动态库及cpu兼容
目录一.利弊分析,按需引用二.平台兼容三.动态加载四.总结在前一章主要分析了图片资源部分的优化(Android App 瘦身总结第一章图片资源的优化处理_There is a Bug!! ...

如何给框架和JS 库瘦身？

一、什么是 Feature Flags

如何给框架和JS 库瘦身？相关推荐

最新文章

热门文章