构建后的index.html
关于CSS
Vite 会自动地将一个异步 chunk 模块中使用到的 CSS 代码抽取出来并为其生成一个单独的文件。
这个 CSS 文件将在该异步 chunk 加载完成时自动通过一个 标签载入，该异步 chunk 会保证只在 CSS 加载完毕后再执行。所以你在打包后的index.html中是看不到这个link的。
h3 是异步模块使用的css，只有在加载到该异步模块时，才去动态插入style。
那些非异步 chunk 模块中使用到的 CSS ，集中打包到一起。你在打包后的index.html中是可以看到这个link的。--图一中的3。
如果你更倾向于将所有的 CSS 抽取到一个文件中，你可以通过设置 build.cssCodeSplit 为 false 来禁用 CSS 代码分割。
运行时，导入 .css 文件将会把内容插入到 标签中，同时也带有 HMR 支持。
路径的处理
原生 ES 导入不支持下面这样的裸模块导入：import { someMethod } from 'my-dep'。
那vite是如何让其不报错的呢。
| 开发过程中的main.ts | 项目运行时的main.ts |
|---|---|
Vite 的一个实现核心 - 拦截浏览器对模块的请求并返回处理后的结果.
通过工程下的 main.js 和开发环境下的实际加载的 main.js 对比，发现 main.js 内容发生了改变，变成了绝对路径。
