奇葩说框架之SFC编译原理

1.从vue打包说起

vue打包版本说明

	UMD	CommonJS	ES Module
Full	vue.js	vue.common.js	vue.esm.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Full (production)	vue.min.js
Runtime-only (production)	vue.runtime.min.js

vue源码编译文件从功能角度主要分为两个类型：Full 版本和 Runtime-only 版本。

Full 版本包括编译器和运行时代码，其中编译器是具有将模板字符串转换成为js render函数功能的代码，运行时是具有生成VUE实例、渲染插入虚拟DOM等功能的代码。

其中，Runtime-only版本相比于Full版本，体积减少了30% 。同时将编译时和运行时分开，也提高了性能。

因此Runtime-only版本是性能方面的首选。要使用Runtime-only版本，最佳实践就是通过单文件组件的方式开发，提前完成编译工作。

2.单文件组件

Vue中单文件组件（single-file components，SFC ）为扩展名为 .vue 的文件，示例如下：

<template>
  <div>
    <p>{
   {msg}},world</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'hello'
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  color: red;
}
</style>

我们平常在项目中开发使用的一般都是这种单文件组件。一个单文件组件可以包含四个部分：template、script、styles、customBlocks。

那么一个SFC是如何变成可以在浏览器上执行的代码呢？这就涉及到对于单文件组件的编译问题了。

3.单文件组件的编译