Vue3+Vite+TypeScript搭建项目分享
vue3
- vue3采用组合api的方式，更有利于代码组织与扩展。
- 将一些api从全局挂载中移除，例如nextTick等，利于摇树优化。
- 优化了vue2中存在的一些问题，例如单文件组件可以存在多个根节点。
Vite
- vite是尤雨溪推出的下一代前端构建工具。
- vite在开发环境下，采用esbuild进行打包，esbuild是用go语言开发，性能非常好，打包速度快。 下图是一个对比
- vite用到esbuild的两个地方：。
- 1、依赖预构建，将一些commonJS导出的依赖转换为 ESM，将一些较大的依赖（例如lodash-es 有超过 600 个内置模块！当我们执行 import { debounce } from 'lodash-es' 时，浏览器同时发出 600 多个 HTTP 请求！尽管服务器在处理这些请求时没有问题，但大量的请求会在浏览器端造成网络拥塞，导致页面的加载速度相当慢。通过预构建 lodash-es 成为一个模块，我们就只需要一个 HTTP 请求了。
- 2、将vue、jsx等文件转换为js。
- vite充分利用了原生ES模块的支持，这也是他启动非常快的原因，不需要对整个应用进行打包。 以官网两张图片做下对比
-
Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
-
同时，利用了HTTP 头来加速整个页面的重新加载，源码模块的请求会根据
304 Not Modified进行协商缓存，而依赖模块请求则会通过Cache-Control: max-age=31536000,immutable进行强缓存，因此一旦被缓存它们将不需要再次请求 -
对TypeScript、css、jsx、tsx提供开箱式支持
TypeScript
- TypeScript是微软开发的开源语言，通过在JavaScript的基础上增加静态类型定义构建而成。
- TypeScript 通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
- 在开发大型中，由于JavaScript是弱类型语言，可能存在一些潜在的问题难以发现。这时候TypeScript就更适合开发大型项目，很多潜在错误都能够在编译时就发现。
总结
- vite构建工具，大大减少了启动项目的时间，给开发者更好的开发体验。
- 使用typeScript可以让我们的代码更加健壮，减少一些潜在的错误，更利于代码维护。
