跳到主要内容

认识

2023年03月04日
柏拉文
越努力，越幸运

一、认识​

Compiler: 编译器，负责将模版字符串（即你编写的类 html 语法的模版代码）编译为 JavaScript 语法的 render 函数。

Runtime: 负责创建 Vue 实例、渲染函数、patch 虚拟 DOM 等代码，基本上除了编译器之外的代码都属于运行时代码。

UMD: 兼容 CommonJS 和 AMD 规范，通过 CDN 引入的 vue.js 就是 UMD 规范的代码，包含编译器和运行时。

CommonJS 典型的应用比如 nodeJS，CommonsJS 规范的包是为了给 browserify 和 webpack 这样旧的打包器使用的。他们默认的入口文件为 vue.runtime.common.js。

二、分类​

2.1 Full Dev​

2.2 Full Production​

2.3 Runtime-only Dev​

2.4 Runtime-only Production​

三、编译配置​

3.1 Runtime Only​

当你使用 vue-loader 或者 vueify 时，*.vue 文件中的模版在构建时会被编译为 JavaScript 的渲染函数。因此你不需要包含编译器的全量包，只需使用只包含运行时的包即可。只包含运行时的包体积要比全量包的体积小 30%。因此尽量使用只包含运行时的包

vue 编译配置如下:

scripts/config.js
'runtime-cjs-dev': {
    entry: resolve('web/entry-runtime.ts'),
    dest: resolve('dist/vue.runtime.common.dev.js'),
    format: 'cjs',
    env: 'development',
    banner
},
'runtime-cjs-prod': {
    entry: resolve('web/entry-runtime.ts'),
    dest: resolve('dist/vue.runtime.common.prod.js'),
    format: 'cjs',
    env: 'production',
    banner
},
'runtime-esm': {
    entry: resolve('web/entry-runtime-esm.ts'),
    dest: resolve('dist/vue.runtime.esm.js'),
    format: 'es',
    banner
}

3.2 Runtime Compiler​

如果你需要动态编译模版（比如：将字符串模版传递给 template 选项，或者通过提供一个挂载元素的方式编写 html 模版），你将需要编译器，因此需要一个完整的构建包。