携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

背景

现在前端工程化的概念大行其道，研发基本上离不开模块化，框架我们有 React，Vue，对应有 jsx、vue 文件，样式文件也有 less，sass 等等，这些东西浏览器本身是不认识的，但我们最终都要把它们统一起来，可以放到任意一个浏览器中去运行，那么我们就需要使用“前端构建工具”来帮我们完成这个工作。
现在前端主流的打包工具主要以 Webpack 为代表，但随着项目规模的发展，构建方面的痛点越来越突出，最大的感受就是太慢了，一方面项目冷启动时必须递归打包整个项目的依赖树，另一方面 JavaScript 语言本身(解释执行、单线程执行)的限制，导致构建性能遇到瓶颈。极大地影响开发者的开发效率和幸福感。
在这样的背景下，一些被称为 Bundleless (或者 Unbundled) 的构建工具应运而生，诸如 Snowpack、Vite，其中 Vite 最近在社区的呼声越来越高。
Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

构建速度对比

这里，我们使用 vite 作为开发构建工具的 Vue3项目和使用 vue-cli 的 Vue2 的项目做下对比。 | 构建工具 | 启动时间 | 打包时间 | | --- | --- | --- | | vite | 135ms | 13025ms | | vue-cli | 1482ms | 28186ms |
这里我们可以很明显的发现，vite在开发环境下，启动速度可以说是几乎瞬间启动，打包速度也要比传统的webpack打包快2倍，是不是有点心动？下面我们来看看为什么vite这么快。

利用浏览器内置 ES Module 的支持(script 标签加上属性 type="module" 即可)，浏览器直接向 dev server 逐个请求各个模块，而不需要提前把所有文件打包。
借助 esbuild 超快的编译速度把第三方库进行预构建，一方面将零散的文件打到一起，减少网络请求，另一方面全面转换为 ESM 模块语法，以适配浏览器内置的 ESM 支持。
Bundleless 和传统的构建工具相比，最大的特点就是不用将业务代码打包(虽然第三方库还是得打包，这个没有办法)，尤其是在项目逐渐庞大的时候，可以极大地提升构建效率和开发体验。

cn.vitejs.dev_guide_why.html.png

Vite 的生态与 webpack 相差甚远，webpack 的 loader 和 plugin 已经非常丰富，而 Vite 在这方面还缺少积累。
Vite 开发环境很快，但生产环境还达不到如此惊艳的程度，Vite 生产环境使用 Rollup 进行构建的，还是需要打包的，虽然在研发环境下，Vite 因为不需要打包，快得惊人，但相应的也增加了网络请求的次数，而在生产环境使用 ESM 效率仍然低下，综合考虑，在生产环境依然需要进行打包，而 Esbuild 对 css 的处理和代码分割并不友好，最终选择了 Rollup。
Vite 作为新出来的构建工具，还没有经历过大量的项目考验，“实战经验”不够成熟，可能会存在没有发现的问题。

这一节，我们简单的介绍了下vite出现的背景，以及它的优势和劣势，下一节，我们来使用vite创建项目