一 Vite的打包过程和静态资源处理方式

Vite 的打包过程和静态资源处理方式可以总结如下：

1.1 打包过程

开发环境：
- 即时编译：Vite 在开发模式下采用即时编译（Just-In-Time compilation），利用快速编译器（如 esbuild）对源码进行转换，不预先构建 bundle，这使得启动和更新速度极快。
- 热模块替换（HMR）：当文件更改时，Vite 通过 WebSocket 向浏览器推送更新，仅重载变更的模块，而非整个页面，保持应用状态。
生产环境：
- 构建应用程序：通过运行 npm run build 命令，Vite 使用 Rollup 进行打包。Rollup 是一个高效的模块捆绑器，专注于ES模块并擅长树摇（tree-shaking），从而减小最终产出的体积。
- 优化与压缩：构建过程中会对代码进行压缩、死代码消除、模块合并等优化，确保生产环境下的性能。

资源引入与转换：
- Vite 自动处理图像、媒体和字体等常见静态资源的引用，将其作为构建资源图的一部分。这些资源会被赋予哈希值以确保缓存一致性，并可以被插件进一步优化。
- Vue SFC（单文件组件）中的资源引用会被自动转换为导入语句，便于管理和优化。
资源内联：
- 小于 assetsInlineLimit 配置值的资源会被内联为 base64 编码的 data URL，减少 HTTP 请求。
- Git LFS（大文件存储系统）占位符会被排除在内联之外，确保不会意外地内联大型文件。
路径处理：
- Vite 在打包时会自动转换资源路径，确保在生产环境中的正确引用。例如，图片路径会从开发时的相对路径变为构建后的带有哈希的绝对路径。
- 支持路径别名配置，如使用 @ 作为项目根目录的快捷方式，简化资源引用。
公共基础路径：
- Vite 允许配置公共基础路径，这影响所有资源的引用，使得在不同部署环境下资源路径能够正确解析。
资源优化与排除：
- 开发者可以通过配置（如 assetsInclude）来扩展静态资源的自动处理范围，或通过插件进一步优化资源处理逻辑。
- 静态资源处理还涉及到资源的分割策略、懒加载策略等，以优化加载时间和用户体验。

总之，Vite 通过智能化的静态资源管理和高效的打包流程，提供了既快速又灵活的开发与生产环境构建方案。

ON THIS PAGE