认识
一、认识
Vite 是一个前端开发与构建工具。采用双引擎架构, 开发阶段使用 Esbuild + no-bundle 服务，生产环境用 Rollup 编译构建。
Vite在开发阶段, Vite 项目的启动可以分为两步。第一步是依赖预构建,借助 Esbuild 超快的编译速度来做第三方库构建和 TS/JSX 语法编译, 第二步是 Dev Server 的启动, 基于浏览器原生 ESModule 的支持实现了 no-bundle 服务,实现开发阶段的 Dev Server, 进行模块的按需加载, 可以直接在浏览器中运行源码，无需事先打包。每一个文件请求进来都会经历一系列的编译流程，然后 Vite 会将编译结果响应给浏览器。
Vite 生产环境借助 Rollup, 从 AST 解析的功能开始，完成代码的词法分析（tokenize）和语义分析（parse），实现模块依赖图和作用域链的搭建，并完成 Tree Shaking、循环依赖检测及 Bundle 代码生成
二、特点
2.1 极速的服务启动
极速的服务启动: 使用原生 ESM 文件，无需打包!
2.2 轻量快速的热重载
轻量快速的热重载: 无论应用程序大小如何，都始终极快的模块热替换（HMR）
三、问题
3.1 Vite、EsBuild、Rollup、Webpack 各自优势、特点?
Vite 是一个前端开发与构建工具。采用双引擎架构, 开发阶段使用 Esbuild + no-bundle 服务，生产环境用 Rollup 编译构建。Vite在开发阶段, Vite 项目的启动可以分为两步。第一步是依赖预构建,借助 Esbuild 超快的编译速度来做第三方库构建和 TS/JSX 语法编译, 第二步是 Dev Server 的启动, 基于浏览器原生 ESModule 的支持实现了 no-bundle 服务,实现开发阶段的 Dev Server, 进行模块的按需加载, 可以直接在浏览器中运行源码，无需事先打包。每一个文件请求进来都会经历一系列的编译流程，然后 Vite 会将编译结果响应给浏览器。Vite 生产环境借助 Rollup, 从 AST 解析的功能开始，完成代码的词法分析（tokenize）和语义分析（parse），实现模块依赖图和作用域链的搭建，并完成 Tree Shaking、循环依赖检测及 Bundle 代码生成
EsBuild 是基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以比传统工具快 10~100 倍, 可以将其他格式的模块转化为 EsModule
Rollup 是一款基于 ES Module 模块规范实现的 JavaScript 打包工具, 并且 Rollup 具有天然的 Tree Shaking 功能，可以分析出未使用到的模块并自动擦除。Rollup 可以直接处理 Es Modules , 对于 CommonJs 需要通过插件来转换。
Webpack: 同样作为前端开发与构建工具, 开发与生产环境打包逻辑相同, 从所有入口开始, 递归处理所有依赖, 会对所有模块进行打包操作。生成最终代码前, 根据模块中出现的特性依赖，补充相应运行时代码, 比如立即表达式 IIFE、Webpack runtime 运行时代码, 生成最终产物。Webpack 实现了一套自己的 CommonJS 规范, 在 Webpack 中, 每个模块都被包装在一个函数中, 这个函数接受一个对象, 这个对象有 exports、require、module 等属性, 通过这种方式实现了模块的隔离, 每个模块都有自己的作用域, 不会污染全局作用域。
3.2 Vite、EsBuild、Rollup、Webpack 各自的 bundle.js 特点?
扩展知识
bundle、chunk、**vendor**这些构建领域的专业概念，这里给大家提前解释一下:
-
bundle指的是整体的打包产物，包含JS和各种静态资源。 -
chunk指的是打包后的JS文件，是bundle的子集。 -
vendor是指第三方包的打包产物，是一种特殊的chunk。