Vue3|Vue3 如何实现 Feature Flags()
在开发组件库或者插件,经常会需要区分多种环境构建,从而实现:
- 提供各种体积版本:全量版、精简版、基础版等;
- 提供各种环境版本:web 版、nodejs 版等等;
- 提供各种规范版本:esm 规范版本、cjs 规范版本、UMD 规范版本等等。
?
Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。本文会从 Vue 源码(版本号:3.0.11)中使用的 Feature Flags 进行构建的过程开始介绍,然后通过简单示例进行学习,最后介绍 rollup、webpack 和 Vite 中的实现。
?
一、什么是 Feature Flags
Feature Flag(又名 Feature Toggle、Flip等)是一种允许控制线上功能开启或者关闭的方式,通常会采取配置文件的方式来控制。可以理解为在代码中添加一个开关,当开关开启,则逻辑会执行下去,否则不会执行,通常代码表现形式为
?http://fex.baidu.com/blog/201...
if
语句,举个简单示例:const flags = true;
const test = () => flags && console.log('Hello Feature Flags');
当
flags
为 true
则执行输出,否则不会。现在我们想控制日志会不会输出,只需改变
flags
的值即可,test
方法逻辑不用修改。可以将 Feature Flag 翻译成特性标志。
?
二、Vue 源码实现 Feature Flags 2.1 使用示例
从上一节对特性标志的介绍后,大家应该对其有点理解,接下来从 Vue3 源码中看一个使用示例:
// packages/compiler-core/src/errors.ts
export function defaultOnWarn(msg: CompilerError) {
__DEV__ && console.warn(`[Vue warn] ${msg.message}`)
}
这里的
__DEV__
就是一个 Feature Flag,当 __DEV__
值为 true
时,会输出后面的日志,否则不会输出。在 Vue3 源码中还存在很多其他特性标志,比如:
__COMMIT__
__TEST__
__GLOBAL__
- ...
2.2 如何定义特性标志
上面只是带大家看了下源码中如何使用,那么接下来看看
__DEV__
这些特性标志是如何定义的。Vue3 中使用了 @rollup/replace 依赖,实现构建时,替换文件中目标字符串内容,比如构建开发环境的包的过程中,将
__DEV__
替换为 true
。还是以上面示例代码为例介绍:
// 本地开发环境 __DEV__ 为 true,经过 @rollup/replace 依赖打包后如下:
export function defaultOnWarn(msg: CompilerError) {
true && console.warn(`[Vue warn] ${msg.message}`)
}// 生成环境中 __DEV__ 为 false,经过 @rollup/replace 依赖打包后如下:
export function defaultOnWarn(msg: CompilerError) {
}
构建后
defaultOnWarn
方法内的 console.warn
语句就被 Tree Shaking 移除掉了。?
三、上手 Feature Flags 这一节通过将分别使用 rollup、webpack 和 Vite 实现三个 Feature Flags 的 Demo。其核心原理就是在构建阶段的时候,已经明确的 Feature Flags 值的内容会被替换成具体的值,然后进行 Tree Shaking。
?
三个示例的全部代码可以到下面仓库查看:
首先我们先创建一个
index.js
文件,输入下面测试内容:// index.js const name = 'pingan8787';
const age = 18;
const featureFlags = () => {
console.warn(name)
__DEV__ && console.log(name)
}featureFlags();
我们需要实现的目标是:当
__DEV__
变量的值为 true
时,打包后的 index.js
将不包含 __DEV__ && console.log(name)
这一行代码。那么开始看看如何实现:
3.1 rollup 实现
在 rollup 中,需要使用 @rollup/replace 包实现构建时替换文本,我们先安装它:
npm install @rollup/plugin-replace --save-dev
然后在
rollup.config.js
中使用:import replace from '@rollup/plugin-replace';
export default {
input: 'index.js',
output: {
file: './dist/index.js',
format: 'cjs'
},
plugins: [
replace({
__DEV__: true
})
]
};
接下来通过
rollup
打包命令,可以看到输出内容如下:const name = 'pingan8787';
const age = 18;
const featureFlags = () => {
console.warn(name)
__DEV__ && console.log(name)
}featureFlags();
可以看到
__DEV__
为 true
时代码并没有 Tree Shaking,再试试改成 false
,输出如下:'use strict';
const name = 'pingan8787';
const featureFlags = () => {
console.warn(name);
};
featureFlags();
这边
__DEV__ && console.log(name)
就被移除了,实现 Tree Shaking。照着相同原理,再看看 webpack 和 Vite 的实现:
3.2 webpack 实现
webpack 中自带了
DefinePlugin
可以实现该功能,具体可以看 DefinePlugin 文档 ,下面看看 webpack.config.js
配置:// webpack.config.jsconst path = require('path')
const webpack = require('webpack')module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
},
mode: 'production',
plugins: [
new webpack.DefinePlugin({
__DEV__: JSON.stringify(true),
})
],
};
因为这是使用
mode: 'production'
模式,所以打包出来的代码会压缩:(()=>{const n="pingan8787";
console.warn(n),console.log(n)})();
可以看出
__DEV__
已经不存在,但 console.log(n)
还存在,这时候把 __DEV__
改成 false
再看看打包结果:console.warn("pingan8787");
只剩下这句,其他都被 Tree Shaking 掉了。
?
3.3 Vite 实现
Vite 默认也是支持自定义全局变量,实现该功能,可以看文档 define option。
通过
pnpm create vite
创建一个简单 Vite 项目,并删除多余内容,并在 main.js
中加入我们的测试代码:import { createApp } from 'vue'
import App from './App.vue'const name = 'pingan8787';
const age = 18;
const featureFlags = () => {
console.warn(name)
__DEV__ && console.log(name)
}featureFlags();
createApp(App).mount('#app')
并且在
vite.config.js
中设置 __DEV__
:// vite.config.jsexport default defineConfig({
plugins: [vue()],
define: {
__DEV__: true
}
})
然后执行
pnpm build
构建项目,可以看到压缩后的代码还存在 __DEV__ && console.log(name)
。文章图片
接下来修改
__DEV__
的值为 false
,再重新打包,可以看到代码已经被 Tree Shaking 了:文章图片
到这里我们就使用 rollup、webpack 和 Vite 分别实现了一遍 Feature Flags 了。
四、总结 本文通过简单例子和 Vue3 源码,与大家介绍了 Feature Flags 的概念和简单的实现,最后分别使用 rollup、webpack 和 Vite 分别实现了一遍 Feature Flags。
【Vue3|Vue3 如何实现 Feature Flags()】在实际业务开发中,我们可以通过设计各种 Feature Flags,让代码能够更好的进行 Tree Shaking。
参考文章
- Feature Flag 功能发布控制
推荐阅读
- 用|用 QRCanvas.js 来实现动态生成二维码
- VUE实现时间轴播放组件
- vue实现横向时间轴
- C|内存管理那些事儿_指针参数是如何传递内存的?
- java实现输出任意整数的每一位
- SpringBoot整合MQTT并实现异步线程调用的问题
- 基于Java利用static实现单例模式
- C++实现LeetCode(19.移除链表倒数第N个节点)
- C语言链表实现工资管理系统
- C语言使用链表实现学生籍贯管理系统