我们使用 vue init
命令创建脚手架的时候,会有如下选择:
Runtime + Compiler
Runtime-only
分别通过两种方式创建vue
脚手架,看看两者的main.js
有什么区别。
在
Vue
实例中,runtime-compiler
创建的项目中的参数是components
和template
。 而在runtime-only
创建的项目中,参数是render
函数,这是他们最大的区别。
组件是怎么被渲染到页面当中去的?
可以发现,template最终还是会被渲染为 render函数。
.vue
文件编译为JavaScript,因为是在编译阶段做的,所以它只包含运行时的 Vue.js 代码,所以代码体积会更轻量。
.vue
文件编译为 JavaScript文件的过程中会将组件中的 template 模版编译为 render
函数,所以我们得到的是 render
函数的版本。所以运行的时候是不带编译的,编译是在离线的时候做的
vue-template-compiler
转换为 render 函数
runtime-only: 将template在打包的时候,就已经编译为 render函数
runtime-compiler: 在运行的时候,才去编译 template
结果: 发布生产的时候,runtime-only 构建的项目代码体积更小,运行速度更快
推荐使用runtime-only构建项目
参考资料
分享计划
博客内容将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/
许可协议
本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议,转载请注明出处。