这是我参与「第五届青训营」伴学笔记创作活动的第18天
前言
Webpack和Vite都是现代化打包工具，但是两者各有各的优点：
- Vite打包快：vite它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速
- Webpack更为完善：目前webpack还是强的，vite也很厉害，但是vite还是需要一点时间
Vite概要介绍
Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。 Vite是新一代前端构建工具，由两大部分组成：
- No-bundle 开发服务，源文件无需打包
- 生产环境基子 Rollup 的 Bundler
核心特征包括：
- 高性能，dev 启动速度和热更新速度非常快!
- 简单易用，开发者体验好
Vite的优势
-
极速的服务启动，使用原生 ESM 文件，无需打包。
-
轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）。
-
丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用。
-
优化的构建，可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建。
-
通用的插件，在开发和构建之间共享 Rollup-superset 插件接口。
-
完全类型化的API，灵活的 API 和完整 TypeScript 类型。
Vite的劣势
- 生态不及webpack，加载器、插件不够丰富
- 打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包
- 项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法
两者打包原理对比
Webpack打包原理
webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当 webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，将所有这些模块打包成一个或多个bundle。
Vite打包原理
vite主要通过 esbuild预构建依赖和让浏览器接管部分打包程序两种手段解决了传统开发构建工具启动和更新慢的问题
