vue框架的代码体积

2022/6/27 vuejs源码

Vue3的源码里每一个warn函数的调用都会配合 _DEV_常量的检查

# 示例图

shili

这里的 DEV 这个常量一定要为true,这个_DEV_就是达到目的的关键。 Vue.js 使用 rollup.js 对项目进行构建,这里的_DEV_实际上是通过 rollup.js 的插件配置来预定义的,功能类似 webpack中的 DefinePlugin 插件

Vue.js在输出资源是,会输出两个版本,其中一个用于开发环境,如 vue.global.js 另一个用于生产环境如 vue.global.prod.js 生产环境 vue.global.prod.js 开发环境 vue.global.js

当vue.js在构建用于开发环境时会把 _DEV_常量设置为true 这时上面的代码在开发环境中是肯定存在的 等价于下面的截图

# 示例图

shili

当vue.js在构建用于开发环境时会把 _DEV_常量设置为 false 这时上面的代码在开发环境中是肯定存在的 等价于下面的截图

shili

当_DEV_常量替换为字面量false时,这是我们发现下面的代码永远不会执行,因为判断条件为始终为假 在构建资源的时候 会被移除掉,因此生产环境 vue.global.prod.js 是不会存在此代码的从而实现减少代码体积。