这是我参与「第四届青训营 」笔记创作活动的第3天
什么是vite？
百度百科：- 前端构建工具
vite是下一代前端开发与构建工具。 [1] Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
组成
一个开发服务器，它基于原生ES模块 提供了丰富的内建功能，速度快模块热更新（HMR）。
一套构建指令，它使用Rollup打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
构建
Vite 提供了一套原生ESM的HMR API。 具有HMR功能的框架可以利用该API提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了HMR到Vue.js单文件组件（SFC）和React Fast Refresh 中。
前端构建工具的意义
- 模块化方案：提供模块加载方案 兼容不同模块规范
- 语法转译：高级语法转译
- 产物质量：产物压缩，无用代码删除，语法降级
- 开发效率：热更新
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
内置Web构建能力
Vite开箱即用的功能等价于
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
- ......
