vite初体验

合集 - Vite学习笔记(8)

1.vite初体验2023-07-02

2.vite依赖预构建2023-07-023.postcss前世今生2023-07-034.vite插件2023-07-095.性能优化前瞻2023-07-176.vite生产优化2023-07-177.CDN加速2023-07-318.配置proxy代理2023-08-01

收起

构建工具是什么

构建工具作用

Vite和webpack区别

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

• webpack支持多模块（ESmodule，commonJS），它一开始必须统一模块化代码（转换成它自己那一套），意味着它需要将所有依赖读取一遍。

• vite是基于esmodule的，更关注浏览器端的开发体验，它不会读取所有依赖，而是按需读取。

Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

• 依赖 大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者 CommonJS）。

Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

• 源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

vite与vite脚手架区别

vite脚手架里面内置了vite，并且已经帮你配置好了很多东西。类似vue-cli和webpack区别。