Vue.js 教程

Vue.js 术语

下面列举了 Vue.js 中的一些专业术语,了解这些专业术语这对顺利学习后续教程,以及和别人交流时都有非常重要的帮助(否则,和别人聊天时,一个一个的专业术语,你却很懵逼,只问你尴尬不)。

术语

完整版

同时包含编译器和运行时的版本。

编译器

用来将模板字符串编译成为 JavaScript 渲染函数的代码。

运行时

用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

UMD

UMD 版本可以通过 <script> 标签直接用在浏览器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue@2.7.14 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)。

CommonJS

CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。

ES Module

从 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?

Tree Shaking 指的就是当我引入一个模块的时候,我不引入这个模块的所有代码,我只引入我需要的代码,这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。

官方有标准的说法:Tree-shaking 的本质是消除无用的 js 代码。无用代码消除在广泛存在于传统的编程语言编译器中,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为 DCE(dead code elimination)。

在 webpack 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况中,虽然依赖了某个模块,但其实只使用其中的某些功能。通过 Tree-Shaking,将没有使用的模块摇掉,这样来达到删除无用代码的目的。

什么是 webpack?

webpack 被定义为现代 JavaScript 应用程序的静态模块打包器 (module bundler),是目前最为流行的JavaScript打包工具之一。

webpack 会以一个或多个js文件为入口,递归检查每个js模块的依赖,从而构建一个依赖关系图 (dependency graph),然后依据该关系图,将整个应用程序打包成一个或多个bundle。

由于 webpack 是用 nodejs 编写的,所以它依赖的运行环境就是 nodejs。也正因为这一点,webpack 只能识别 JavaScript,所有非 JavaScript(包括 HTML,CSS,Typescript 等)编写的文件都需要经过处理,这是借助对应的 loader 实现的。

什么是 CDN?

CDN 是构建在数据网络上的一种分布式的内容分发网。 CDN 的作用是采用流媒体服务器集群技术,克服单机系统输出带宽及并发能力不足的缺点,可极大提升系统支持的并发流数目,减少或避免单点失效带来的不良影响。

说说我的看法
全部评论(
没有评论
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
公众号