提升用户的开发体验

  1. 大量的警告、错误的提示信息（帮助我们更好更快的排查问题）

  2. 控制台输出结果，浏览器支持我们输出到控制台的内容的格式

    1. 以 Chrome为例，我们可以打开 DevTools 的设置，然后勾选“Console”→“Enable custom formatters”选项。而后我们输出到控制台的变量就会变成Vue中变量的形式

    Untitled

控制框架代码的体积

  1. 开发环境的代码与生产环境的区分开，生产打包的时候将开发代码剔除（如告警等）

良好的Tree-Shaking

  1. 要实现 Tree-Shaking，必须满足一个条件，即模块必须是ESM（ES Module），因为 Tree-Shaking 依赖 ESM 的静态结构。

  2. Tree-Shaking不会主动移除被引用的模块，即使这个模块是空的，但是可以添加一个注释(/#PURE/)表明方法调用不会产生副作用，可以移除

    import {foo} from './utils'

/*#__PURE__*/ foo()

    rollup/webpack/压缩工具（如 terser）都能识别它

框架应该输出怎样的构建产物

  1. 应该输出各种格式的js包
    1. IIFE - Immediately Invoked Function Expression，即“立即调用的函数表达式”，即自调用闭包
    2. ESM
    3. cjs

特性开关

  1. VUE_OPTIONS_API 如果明确不会使用Options API, 则可以使用VUE_OPTIONS_API关闭Options API, 这样在打包的时候就不会将兼容代码打进去，可以减小包体积

错误处理

  1. 统一的错误处理函数封装，代替用户统一处理错误

良好的Typescript类型支持