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

初识Vite

• 极速的服务启动
  使用原生 ESM 文件，无需打包
• 轻量快速的热重载
  无论应用程序大小如何，都始终极快的模块热重载（HMR）
• 丰富的功能
  对 TypeScript、JSX、CSS 等支持开箱即用
• 优化的构建
  可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
• 通用的插件
  在开发和构建之间共享 Rollup-superset 插件接口
• 完全类型化的API
  灵活的 API 和完整 TypeScript 类型

为什么使用Vite

随着科学技术的发展我们需要构建越来越大型的应用，而这时需要处理的 JavaScript 代码量也呈指数级增长。此时使用 JavaScript 开发的工具通常需要很长时间才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来，极大的影响了开发效率。
而Vite的优势在于：
1.Vite 选择了与单个打包器（Rollup）进行更深入的集成。Vite 还支持一套扩展了 Rollup 的插件接口，开发和构建两种模式都适用
2.更快的依赖预构建
3.支持Monorepo
4.支持CSS
5.Vue 第一优先级支持
而这些都使Vite在开发工作中显得更灵巧轻便。

使用Vite

1.项目初始化
安装pnpm，新建文件夹，初始化命令，安装依赖，启动项目，得到网址后打开。
2.使用Sass/Scss和CSS Modules
任何以 .module.css 为后缀名的 CSS 文件都被认为是一个CSS Modules文件。导入这样的文件会返回一个相应的模块对象 3.使用静态资源
4.使用HMR
5.生产环境Tree Shaking

• 使用插件 Vite 可以使用插件进行扩展，这得益于 Rollup 的插件接口设计和一部分 Vite 独有的额外选项。这使得用户既能够使用Rollup的生态系统也能根据需要也能够扩展开发服务器和 SSR 功能。

本文内容来源于开始 | Vite (vitejs.net)和今日课程《Vite知识体系》