在开发组件库或者插件,常常会须要辨别多种环境构建,从而实现:
- 提供各种 体积 版本:全量版、精简版、根底版等;
- 提供各种 环境 版本: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/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__
- …
还有很多,有趣味的小伙伴能够在 Vue3 源码中找找。
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.js
const 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.js
export 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。
在理论业务开发中,咱们能够通过设计各种 Feature Flags,让代码可能更好的进行 Tree Shaking。
参考文章
- Feature Flag 性能公布管制