Vite构建工具学习
目前常规主要两类构建工具
- Webpack: 市场份额大，生态成熟
- Vite: 思想新颖，解决了一些Webpack解决不了的问题，效果也更好，同时也降低了一些负担
Vite
Vue官方团队出品，未来Vue-cli会将vite作为默认的预设工具
未来使用vue-cli去构建vue项目的时候需要写vue.config.js不再是webpack的配置而是vite的配置（目前只针对于浏览器项目）
同时支持编译react和angular，svelte
什么是构建工具
浏览器他老人家只认识html, css, js三种文件类型，如果使用了各种前端的工具写的代码，浏览器是不认识的，需要进行转换将各种文件转换为js代码。
- typescript: 需用tsc将ts转换为js代码
- React/Vue: 安装 react-compiler / vue-compiler ，我们写的.jsx或者.vue文件转换为render函数
- less/sass/component-style: 又需要安装less-loader, sass-loader等一系列转义工具
- 语法降级: 需要在老旧浏览器执行代码，babel –> 将es的新语法转换为旧版浏览器可以接受的语法
- 体积优化： uglifyjs 将代码进行压缩，变成体积更小性能更高的文件
- and more……
如果没有构建工具，每一次修改代码，都需要上诉所有工具全部重新人工编译一遍，非常耗时耗力而且麻烦。
App.jsx –> tsc –> App.jsx —> React-compiler –> js文件
自然而然的希望有一个工具把上边所有的工具集成，因此就有了构建工具的概念。
> 概念 — 打包：将我们写的浏览器不认识的代码，用工具编译处理的过程叫打包，打包完成之后会生成一个浏览器认识的文件
构建工具的职责
- 模块化开发支持：支持直接从node_modules里引入代码，以及多种不同的类型模块化的支持。（比如支持require语法等）
- 处理代码兼容性：参考上文（不是构建工具做的，而是构建工具包含了这些语法对应的处理工具集成，自动化处理）
- 提高项目性能：比如压缩文件、打包、代码分割
- 优化开发体验：构建工具会自动帮你监听文件的变化，当文件变化以后自动调用对应的集成工具进行重新打包，然后再浏览器重新运行（热更新，Hot replacement）；
- 自动解决开发服务器，跨域的问题，用各种compiler，vli工具解决跨域问题
构建工具让我们不用每次都关心再浏览器如何运行，只需要首次给构建工具提供一个配置文件（这个配置文件也不是必须的，会有默认值），有了这个集成的配置文件，下次需要更新的时候再调用一次对应的命令就行了。如果再结合热更新，就更加不需要管任何东西了，直接ctrl + s保存就行了。
对比Webpack
项目越大，Webpack所需要处理的js越多，往往造成需要几分钟的时间才能跑起来代码（最大缺陷，编译时间，而且还改不了），Webpack的原理就是将不同的模块规范全部用自己的规范组合一遍，因此所有的模块全部都要读一遍转换，因此工作量时间巨大。
Vite干的活：
基于es modules的（你必须要用这个规范的代码），不允许写commonjs的代码，因此vite也取代不了webpackVite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
- webpack关注兼容性
- vite关注浏览器端的开发体验（速度快）
（vite，灰色部分路由不加载，因此速度快）
0 条评论