vite工程化

Vite 通过直接利用浏览器的模块加载能力、将 CommonJS 模块转换为 ES 模块并缓存结果、基于原生 ES 模块的 HMR 以及对 TypeScript 的直接支持，提供了更快的开发体验和更高的开发效率。

1.直接利用浏览器模块加载功能

更快加载速度：不需要打包，在服务启动时立即执行服务，减少等待时间；

按需加载：不用加载整个应用，只加载需要的模块，减少初始加载时间；

2. 将 CommonJS 模块转换为 ES 模块，并缓存结果

CommonJS 是 Node.js 中常用的模块系统，而 ES 模块是 JavaScript 的官方标准模块系统。Vite 在开发环境中会将 CommonJS 模块转换为 ES 模块，以便浏览器能够正确加载和使用这些模块。这样做的好处包括：

• 兼容性：许多第三方库仍然使用 CommonJS 模块，Vite 通过转换确保这些库可以在浏览器中正常运行。

• 性能优化：转换后的模块会被缓存，避免重复转换，从而提高开发环境的性能。

• 一致性：通过将所有模块统一转换为 ES 模块，Vite 确保了代码库的一致性，简化了开发和构建过程。

3. 什么是 HMR？什么是 ES 模块？

• HMR（Hot Module Replacement）：HMR 是一种开发技术，允许在应用程序运行时替换、添加或删除模块，而无需完全重新加载页面。Vite 的 HMR 基于原生 ES 模块，这意味着当代码发生变化时，Vite 只会重新加载和替换发生变化的模块，而不是整个应用。这大大加快了开发过程中的反馈速度。

• ES 模块（ECMAScript Modules）：ES 模块是 JavaScript 的官方标准模块系统，允许开发者将代码拆分为多个模块，并通过 import 和 export 语句进行模块间的依赖管理。ES 模块是静态的，意味着模块的依赖关系在代码执行前就已经确定，这使得工具（如 Vite）能够更好地进行优化。

4. 如果直接支持 TS，那是不是不用引入？

Vite 本身对 TypeScript（TS）有很好的支持。你可以在 Vite 项目中直接使用 TypeScript 文件（.ts 和 .tsx），而不需要额外的配置或引入其他工具。Vite 会通过 esbuild 将 TypeScript 代码转换为 JavaScript，以便浏览器能够执行。

• 无需额外引入：Vite 内置了对 TypeScript 的支持，因此你不需要额外引入其他工具（如 ts-loader 或 babel）来处理 TypeScript 代码。

• 开发效率：由于 Vite 的快速启动和 HMR 特性，使用 TypeScript 进行开发时，你可以享受到更快的编译速度和更流畅的开发体验。

原文地址：https://blog.csdn.net/2301_80052985/article/details/145216471

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！