这是我参与「第五届青训营 」伴学笔记创作活动的第16天。
Vite是新一代的前端构建工具。利用浏览器ESM特性导入组织代码，在服务端按需编译返回，完全跳过了打包这个概念；而生产环境则是利用Rollup作为打包工具，号称是下一代的前端构建工具。
Vite的两大组成部分:
- 1.No-bundle开发服务,源文件无需打包
- 2.生产环境基于Rollup的Bundler
Vite的核心特征
- 1.高性能,dev启动速度和热更新速度非常快!
- 2.简单易用,开发者体验好
前端构建工具的意义
- 模块化方案————1.提供模块加载方案2.兼容不同模块规范
- 语法转译————1.高级语法转译,如Sass、TypeScript2.资源加载,如图片、字体、worker
- 产物质量————产物压缩、无用代码删除、语法降级
- 开发效率————热更新
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
与Vue CLI的不同
主要区别在于，对于Vite，在开发过程中没有捆绑。源代码中的ES Import语法直接提供给浏览器浏览器，通过原生的的
这种方法有几个优点：
-
因为没有打包工作要做，所以服务器冷启动非常快。
-
代码是按需编译的，因此只有在当前页面上实际导入的代码才会编译**。我们不必等到整个应用程序打包后才开始开发，这对于有几十个页面的应用程序来说是一个巨大的不同。
-
热模块更新（HMR）的性能与模块总数解耦**。这使得无论应用程序有多大，HMR都能保持快速。
整个页面的重新加载可能比基于绑定包的设置稍慢，因为本机ES导入会导致具有深度导入链的网络瀑布。但是，由于这是本地开发，所以与实际编译时间相比，差异是很小的。由于已编译的文件缓存在内存中，因此在页面重新加载时没有编译开销。
简单来说，就是使用Vite来开发Vue 3项目可以减少不必要的等待项目重启或模块更新的时间，加快开发进度。在生成环境下，我们依然是需要对项目进行打包的，以避免频繁的网络请求，Vite也提供了一个vite build来实现这一点，我们在终端窗口中执行npm run build，实际执行的就是vite build命令。
以上文章来自：
baijiahao.baidu.com/s?id=168477…
