vite 在构建过程中执行了以下优化： 详见官网：https://cn.vitejs.dev/guide/features.html#build-optimizations 其中提到了 css 代码分割， 预加载指令生成和异步 chunk加载优化三个，我们来依次分析下：

css 代码分割(build阶段)

vite 会自动的将一个异步 chunk 模块中使用到的 CSS 代码抽取出来并为其生成一个单独的文件。这个 CSS 文件将在异步 chunk 加载完成时自动通过一个 标签载入，该异步 chunk 只会保证只在 CSS 加载完毕后再执行。

这部分的处理是在 vite:css-post 插件中的 renderChunk 钩子处理：

预加载指令生成(build阶段)

Vite 会为入口 chunk 和它们在打包出的 HTML 中的直接引入自动生成 指令。 当浏览器遇到 标签时，它会预加载指定的 JavaScript 模块，并在需要时进行执行。这有助于减少请求延迟，并提前获取应用程序所需的关键资源。 需要注意的是， 只能用于预加载 JavaScript 模块。对于其他类型的资源，如 CSS 文件或图像，应使用适当的标签和属性进行预加载，如 或 。

异步 chunk 加载优化(build阶段)

在实际项目中，Rollup 通常会生成 “共用” chunk —— 被两个或以上的其他 chunk 共享的 chunk。与动态导入相结合，在无优化的情境下，当异步 chunk A 被导入时，浏览器将必须请求和解析 A，然后它才能弄清楚它也需要共用 chunk C。这会导致额外的网络往返。vite 将使用一个预加载步骤自动重写代码，来分割动态导入调用，以实现当 A 被请求时，C 也将 同时 被请求。

思考，构建工具常见的优化手段有哪些，我们能够借鉴的地方有哪些？

构建优化的目的是提升页面展现速度，优化手段主要集中在提升资源加载速度上：

1. 拆分打包后的资源，按需加载资源

• css 代码分割

2. 网络请求上的优化

• 异步 chunk 加载优化
• 预加载指令的生成

其他业界构建性能优化的方法建议参考：https://webpack.docschina.org/guides/build-performance/