这是我参与「第四届青训营 」笔记创作活动的第7天。

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优化。