这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
Vite
前端构建工具的意义
组成————两大部分
一个开发服务器
No-bundle开发服务，源文件无需打包
它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
一套构建指令
生产环境基于Rollup的Bundler
它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
NPM依赖解析和预构建
- 预构建 它们可以提高页面加载速度，并将 CommonJS / UMD 转换为 ESM 格式。预构建这一步由 esbuild 执行，这使得 Vite 的冷启动时间比任何基于 JavaScript 的打包器都要快得多。
- 重写导入为合法的 URL，例如
/node_modules/.vite/deps/my-dep.js?v=f3sf2ebd以便浏览器能够正确导入它们。
核心特征
- 高性能，dev 启动速度和热更新速度非常快!
- 简单易用，开发者体验好
基于原生的ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
进阶路线
深入双引擎
esbuild
esbuild 是一个快速的JavaScript 打包器，主要目标是带来构建工具性能的新时代，并在此过程中创建易于使用的现代捆绑器 esbuild 是一个用 Go 编写的快速而简单的JavaScript 捆绑包，
其主要特点
- 急速无缓存
- ES6和CommonJS模块
- ES模块的TreeShaking
- JavaScript和Go的API
- TypeScript和JSX的语法
- sourcemap
- minify
- plugins
rollup.js
Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用，但 Rollup 让你现在就可以，想用就用。
Vite插件开发
插件机制————抽离核心逻辑、易于拓展
代码分割（拆包）
JS编译工具————Babel
出现原因：
- JavaScript 语法标准繁多浏览器支持程度不一
- 开发者需要用到高级语法
