关于Vite

Vite是什么？

Vite是新一代前端构建工具；它有两大组成部分：
1.No-bundle开发服务，源文件无需打包；
2.生产环境基于Rollup的Bundler
核心特征是：
1.高性能，dev启动速度和热更新(热更新是指软件不通过运营商店的软件版本更新审核，直接通过应用自行下载的软件数据更新的行为。简单来说，就是在用户下载安装APP之后，打开App时遇到的即时更新。)速度非常快;
2.简单易用，开发者体验好。
基于原生ESM的开发服务有时：
1.无需打包项目源代码;
2.天然的按需加载;
3.可以利用文件级的浏览器缓存。

如何使用Vite?

项目初始化：
npm i -g pnpm
pnpm create vite
pnpm install
npm run serve
生产环境Tree Shaking的优化原理：
1.基于ESM的import/export语句依赖关系，与运行时状态无关；
2.在构建阶段将未使用到的代码进行删除。

Vite整体架构

为什么要进行预打包？
1.避免node_modules过多的文件请求
2.将CommonJS格式转换为ESM格式
实现原理：
1.服务启动前扫描diamante中用到的依赖
2.永Esbuild对依赖代码进行预打包
3.改写import语句，指定依赖为预构建产物路径

Vite进阶之路

为什么需要插件机制？
1.抽离核心逻辑
2.易于拓展
JS编译工具(Babel)出现的原因：
1.JavaScript语法标准繁多，浏览器支持程度不一
2.开发者需要用到高级语法
如何在构建产物中避免这类问题？
1.上层解决方案：@vitejs/plugin-legacy
2.底层原理 借助Babel进行语法自动降级；提前注入Polyfill实现，如core-js、regenerator-runtime
服务端渲染(SSR)一种常见的渲染模式，用于提升首屏性能和SEO优化。