下面列举了 Vue.js 中的一些专业术语,了解这些专业术语这对顺利学习后续教程,以及和别人交流时都有非常重要的帮助(否则,和别人聊天时,一个一个的专业术语,你却很懵逼,只问你尴尬不)。
同时包含编译器和运行时的版本。
用来将模板字符串编译成为 JavaScript 渲染函数的代码。
用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
UMD 版本可以通过 <script> 标签直接用在浏览器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue@2.7.14 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)。
CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。
从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件:
(1)为打包工具提供的 ESM:为诸如 webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析,所以打包工具可以利用这一点来进行 “tree-shaking” 并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)。
(2)为浏览器提供的 ESM (2.6+):用于在现代浏览器中通过 <script type="module"> 直接导入。
Tree Shaking 指的就是当我引入一个模块的时候,我不引入这个模块的所有代码,我只引入我需要的代码,这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。
官方有标准的说法:Tree-shaking 的本质是消除无用的 js 代码。无用代码消除在广泛存在于传统的编程语言编译器中,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为 DCE(dead code elimination)。
在 webpack 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况中,虽然依赖了某个模块,但其实只使用其中的某些功能。通过 Tree-Shaking,将没有使用的模块摇掉,这样来达到删除无用代码的目的。
webpack 被定义为现代 JavaScript 应用程序的静态模块打包器 (module bundler),是目前最为流行的JavaScript打包工具之一。
webpack 会以一个或多个js文件为入口,递归检查每个js模块的依赖,从而构建一个依赖关系图 (dependency graph),然后依据该关系图,将整个应用程序打包成一个或多个bundle。
由于 webpack 是用 nodejs 编写的,所以它依赖的运行环境就是 nodejs。也正因为这一点,webpack 只能识别 JavaScript,所有非 JavaScript(包括 HTML,CSS,Typescript 等)编写的文件都需要经过处理,这是借助对应的 loader 实现的。
CDN 是构建在数据网络上的一种分布式的内容分发网。 CDN 的作用是采用流媒体服务器集群技术,克服单机系统输出带宽及并发能力不足的缺点,可极大提升系统支持的并发流数目,减少或避免单点失效带来的不良影响。