更高效的构建工具-vite

前言

首先我们要认识什么时构建工具？

企业级项目都具备什么功能呢？

• Typescript：如果遇到ts文件，我们需要使用tsc将typescript代码转化为js代码；
• React/Vue：如果使用前端框架需要安装react-complier / vue-complier，将我们的jsx文件/vue文件转换为render函数；
• less/sass/postcss/component-style：如果使用这些css预处理器，需要安装less-loader和sass-loader等一系列编译工具；
• 语法降级：Babel -->可能有部分浏览器还不支持新语法，所有我们还需将es的新语法转换到旧版本浏览器可以识别的语法格式；
• 体积优化：uglifyjs / Terser --> 可以将我们的代码压缩成体积更小性能更高的文件；

如果我们稍微需要修改一些东西，都需要这么多东西的构建，非常麻烦~

现在有一个工具可以把tsc,vue-complier,less-loader,babel,terser等等都集成到一起，当代码更改时会自动将这些全部启动运行一遍。非常之轻松，这就是构建工具！！！

除了这些功能，一个构建工具还集成了：

• 模块化开发支持：可以直接从node_modules引入代码；
• 提高项目性能：压缩文件，代码分割；
• 优化开发体验：
  • 会自动监听文件的变化，自动帮你调用所需要的处理工具并且进行重新打包（ 整个过程叫做热更新（HRM））
  • 开发服务器：帮助我们解决跨域问题；为什么叫开发服务器呢？ 因为服务器与服务器之间时不存在跨域问题的，所以本质上就是创建一个服务器帮助你去访问你访问不到的服务器；

Vite是什么

vite开发环境依赖esbuild进行预构建，生产环境则依赖rollup进行打包，并且充分利用了现代浏览器的特性，它是站在众多巨人肩膀上的一个产物，一个非常棒的前端项目的构建工具。vue-cli中已经将vite作为预设构建工具，如果我们使用vue-cli进行创建项目时，vue.config.js不再将时webpack的配置而是vite的配置。

Vite和webpack的比较

vite官方文档
当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。 包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

他们两种构建工具的侧重点不同，webpack更多的是关注兼容性，vite是更侧重于浏览器端的开发体验~

1. 运行原理

• webpack
  

当我们使用webpack启动项目时，webpack会根据我们配置文件（webpack.config.js） 中的入口文件（entry），分析出项目项目所有依赖关系，然后打包成一个文件（bundle.js），交给浏览器去加载渲染。项目越大，运行时间越长。

• vite
  
  使用vite运行项目时，首先会用esbuild进行预构建，将所有模块转换为es module，不需要对我们整个项目进行编译打包，而是在浏览器需要加载某个模块时，拦截浏览器发出的请求，根据请求进行按需编译，然后返回给浏览器。

2. 使用成本

• webpack
  如果我们使用webpack自己去搭建项目脚手架时，需要配置比较多的东西， 比如：跨域、代码压缩、代码分割、css预处理器的代码转换、样式兼容性、vue/react代码解析、图片压缩、代码热更新、es降级、ts转换等等。

• vite
  vite对我们常用功能都做了内置，比如：css 预处理器、html 预处理器、hash 命名、异步加载、分包、压缩、HMR等等，我们可以很轻松的通过配置项去配置。降低了我们的学习成本、增加了开发体验。

Vite的初体验

vite需要node.js版本18+，20+，请注意升级你的node版本

//使用 NPM:
$ npm create vite@latest

//使用 Yarn:
$ yarn create vite

//使用 PNPM:
$ pnpm create vite

这里需要输入项目名称，选择需要构建的框架以及需要使用的语言。

最后运行这上图的三条命令，构建速度也是非常的快~

创建成功的效果图如下图：

到这里vite的初步讲解就算结束了，创作不易，感谢支持！❤️❤️❤️