ScarSu的个人网站
·
Vite笔记
💡
原文中文，约12600字，阅读约需30分钟。
📝
内容提要
Vite是一个构建工具，解决前端应用启动和热更新效率问题。它基于原生ES模块实现按需加载和免打包，使用ESBuild进行依赖预构建，提供性能和灵活性。Vite在生产环境使用Rollup进行打包，提供配置选项和插件系统。通过优化技术如分包策略、gzip压缩、动态导入和Glob导入，进一步提升Vite应用性能。
🎯
关键要点
- Vite是一个构建工具，解决前端应用启动和热更新效率问题。
- Vite基于原生ES模块实现按需加载和免打包，使用ESBuild进行依赖预构建。
- Vite在生产环境使用Rollup进行打包，提供配置选项和插件系统。
- Vite的启动速度比webpack快，依赖预构建和源码转换是其核心原理。
- Vite支持对.less和.scss文件的内置处理，无需额外插件。
- Vite通过ESBuild预构建依赖，优化HTTP请求和缓存策略。
- Vite支持静态资源的ESM方式提供，支持JSON的具名导入。
- Vite的打包功能支持多入口和hash命名，兼容性较低版本浏览器。
- Vite配置文件支持环境区分和路径别名，内置dotenv库读取环境变量。
- Vite插件系统支持官方和社区插件，插件开发需了解Vite生命周期钩子。
- Vite天然支持TypeScript，使用ESBuild进行转译，速度快于tsc。
- Vite的性能优化包括分包策略、gzip压缩、动态导入和Glob导入。
➡️
