当前位置: 首页 > Web前端 > vue.js

Vue构建版本理解

时间:2023-03-31 14:38:25 vue.js

前言中提到了Vue的构建版本。对于Vue初学者来说,很多人看不懂。官方文档中关于构建版本的解释放在了。在前言中,以表格的形式进行了介绍。官方文档跳转到图形构建版本如图。完整版:包含编译器和运行时版本。模板字符串编译成JavaScript渲染函数代码,体积大,效率低。运行时:用于创建Vue实例、渲染处理虚拟DOM等的代码体积小,效率高。可以解释为不包含编译器的版本。(编译器源码3000+行)UMD:UMD是通用模块版本,支持多种模块方式。vue.js默认的文件是runtime+compilerUMD版本的CommonJS(cjs):CommonJS版本用于配合Browserify或webpack1等旧的打包工具。ESModule:从2.6开始,Vue将提供两个ESModules(ESM)构建文件,这是现代打包工具提供的版本。ESM格式旨在进行静态分析(在编译时而不是运行时解决模块依赖关系),因此打包工具可以利用这一点来“摇树”并从最终包中排除未使用的代码。ES6模块和CommonJS模块的区别HelloWorld

//UMD版本在运行时会报错,不能编译模板Templatevue-cli默认导入vue.runtime.esm.js查看vue-cli创建的项目的vue导入版本yarnglobaladd@vue/cli(vuecli目前最新的是4.5)vuecreatexxx(创建时选择Vue2withcli)在生成的项目中对cli进行了webpack打包,这样项目就看不到我们在main.js下写的importVuefrom'vue'了。从哪里进口的?通过命令行工具vueinspect查看配置文件,发现Vue默认使用的是esm运行时版本。vue//操作方法,生成输出文件vueinspect>output.js