Vite 学习笔记（一）

什么是构建工具

成熟的企业级项目里可能会具备哪些功能？

1. TypeScript
2. React/Vue
3. less/sass/postcss/component-style
4. 语法降级：babel —> 将 es 的新语法降级为旧版浏览器可以接受的语法
5. 体积优化
6. ……

要做的事情很多很杂，需要一个工具将以上的步骤全部集成到一起；开发者能将更多的注意力放在业务代码上。

这个工具就是构建工具。

一个构建工具到底承担了哪些脏活累活：

1. 模块化开发支持：支持直接从 node_modules 中引入代码 + 多种模块化（es6 module/commonjs）
2. 将处理代码兼容性的工具集成进来进行自动化处理
3. 提高项目性能：压缩文件、代码分割
4. 优化开发体验
   • 监听文件变化，自动调用对应的工具并刷新浏览器（热更新 HMR）
   • 开发服务器：跨域

市面上主流的构建工具：

• webpack
• vite
• parcel
• esbuild
• rollup
• grunt
• gulp

Vite 相较于 webpack 的优势

webpack 更关注兼容性，支持多种模块化（es modules/commonjs），开始编译时必须要统一模块化代码，必须要将所有的依赖全部读一遍；vite 关注浏览器端的开发体验，限定了 es modules 的模块化。

webpack 先解析完所有依赖才启动开发服务器；vite 先启动开发服务器，再根据 entry 进行按需加载。

依赖预构建

对于 commonjs 导出的模块，vite 会调用 esbuild 将其转换成 esmodule 规范，放在 /node_modules/.vite/deps 目录下。

解决了 3 个问题

1. 不同的第三方包会有不同的导出格式
2. 对路径的处理上可以直接使用 .vite/deps，方便路径补全
3. 无论某个库有多少额外的 export 和 import，vite 都会尽可能的将它们集成到最后只生成一个或几个模块，减少浏览器的加载数量（lodash-es）