next-generation-frontend-tooling-vite

下一代前端构建工具 Vite

Vite 是一种构建工具,旨在为现代Web项目提供更快,更精简的开发体验。它包括两个主要部分:

  • 一个开发服务器,它在ES模块上提供了丰富的功能增强,例如,极快的热模块更换(HMR)。

  • 一个构建命令,它将您的代码与Rollup捆绑在一起,Rollup已预先配置为输出高度优化的静态资产进行生产。

特性

Features Details
即时的服务器启动 通过原生ESM提供的按需文件,无需 bundleing!
闪电般的HMR 无论模块大小如何,热模块更换(HMR)都能保持快速。!
丰富的功能 丰富的功能现成的对TypeScript,JSX,CSS等的支持!
构建优化 与配置的rollup打包!支持多页应用和类库模式!
通用插件 Rollup超集插件接口在开发和构建之间共享!
全类型API 具有完整TypeScript输入功能的灵活编程API。

使用

可以按模板创建各种前端框架项目

使用下面命令即可创建

1
npm init @vitejs/app my-vite-app -- --template react-ts

1
yarn create @vitejs/app my-vite-app --template react-ts

支持的模板包括:

  • vanilla
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts

vite 主要命令

1
2
3
4
5
6
7
{
"scripts": {
"dev": "vite", // start dev server
"build": "vite build", // build for production
"serve": "vite preview" // locally preview production build
}
}

vite 服务器运行原理

在浏览器中使用ES模块之前,开发人员还没有用于以模块化方式编写JavaScript的本机机制。这就是为什么我们都熟悉bundling的概念的原因:使用工具将我们的源码模块处理和连接成可以在浏览器中运行的文件。

随着时间的流逝,我们已经看到了诸如webpack,Rollup和Parcel之类的工具,这些工具极大地改善了前端开发人员的开发经验。

然而,随着我们的应用变得越来越复杂,需要bundling的文件也越来越多。大型项目包含数千个模块的情况并不少见。我们开始遇到基于JavaScript的工具的性能瓶颈:启动开发服务器通常会花费不合理的长时间等待(有时可能长达数分钟!),即使使用HMR,文件编辑也可能需要花费几秒钟的时间才能反映出来。在浏览器中。缓慢的反馈循环会极大地影响开发人员的生产力和幸福感。

基于 bundle 的开发服务器架构

基于 native ESM 的开发服务器架构