# 「工程化」如何看待构建工具 Vite?
# 一、Vite 是什么?
Vite(法语意为“迅速”,发音/vit/)是一种全新的前端构建工具。你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合,但是更轻更快。 Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具(如 esbuild)来提供一个快速且现代的开发体验。
# 二、Vite 怎么玩?
兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。
使用 NPM:
npm init @vitejs/app
使用 Yarn:
yarn init @vitejs/app
这里我选择了默认项目名称、 vue-ts
模板(这里 Vue 版本为 3.0 ),然后按照提示,下一步下一步即可,如下图:
项目目录如下图:
输入指令,秒启动:
cd vite-project
npm install
npm run dev
大家也跑起来玩一下吧。😂
# 三、Vite 为什么快?
# 3.1 极速的服务启动
Vite 使用 esbuild (opens new window) 预构建依赖,以原生 ESM (opens new window) 方式服务源码。
Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块,以提高后续页面加载性能。例如,我们从同一个模块引入多个单独的文件 import { debounce } from 'lodash-es'
时,Vite 会通过预构建 lodash-es
(内置模块较多) 成一个模块,避免大量请求在浏览器造成网络阻塞。
Esbuild 使用 Go 编写,比 JavaScript 编写的打包器预构建依赖快 10-100 倍。
Vite 只在浏览器请求源码时进行转换并按需提供源码。动态导入的代码,只在当前屏幕上实际使用时才会被处理。
# 3.2 轻量快速的热重载
注意
手动 HMR API 主要用于框架和工具作者。作为最终用户,HMR 可能已经在特定于框架的启动器模板中为你处理过了。
Vite 提供了一套原生 ESM 的 HMR API (opens new window)。 具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新,而无需重新加载页面或删除应用程序状态。
# 四、什么是 esbuild?
# 4.1 官网描述
一个极速 JavaScript 打包工具。
# 4.2 主要特点
- 极快的速度,无需缓存
- ES6 和 CommonJS 模块
- ES6 模块的 Tree shaking
- 适用于 JavaScript 和 Go 的 API
- TypeScript 和 JSX 语法
- Source maps
- 压缩
- Plugins
# 4.3 存在的问题
- 调试麻烦
esbuild 的核心代码是用 golang 编写,用户使用的直接是编译出来的 binary 代码和一堆 js 代码,binary 代码几乎没法断点调试,每次调试 esbuild 的代码,需要拉下代码重新编译调试,调试要求较高,难度较大。
- 只支持 es6
目前国内大部分都仍然需要考虑 es5 场景,因此并不能将 esbuild 的产物作为最终产物,通常需要做 es6 到 es5 的转换。
WebAssembly 也叫 WASM,它是为基于栈的虚拟机设计的二进制指令格式,WASM 作为可移植目标,用于编译高级语言(如 C/C++/Rust),从而可以在 Web 上部署高性能客户端和服务器应用,同时它也可以在许多其它环境中使用。
WebAssembly 描述了一种内存安全的沙箱执行环境,该环境甚至可以在现有 JavaScript 虚拟机内部实现。当嵌入到 Web 中时,WebAssembly 将强制执行浏览器的同源和权限安全策略。
- golang wasm 的性能相比 native 有较大的损耗,且 wasm 包体积较大,
目前 golang 编译出的 wasm 性能并不是很好(相比于 native 有 3-5 倍的性能衰减),并且 go 编译出来 wasm 包体积较大( 8M+ ),不太适合一些对包体积敏感的场景(比如生产环境)。
- 插件机制缺失
# 五、未来构建工具展望
相信玩过 Vite 的同学们都被它的首次启动秒开,极速热启动等等优势深深的吸引到了。个人感觉这个方向还是非常潜力的。
前端玩具层出不穷,敢问路在何方?
种一棵树最好的时间是十年前,其次是现在。一起玩一玩 Vite 吧。
# 六、感谢
- 如果这篇文章对你有帮助,就点个赞支持下吧!感谢阅读。