开发阶段：页面(client)与vite启的服务(server)之间是如何处理 scss 资源的

[BUPTlhuanyu]

页面(client)与vite启的服务(server)之间是如何处理 scss 资源的

1. 访问 localhost:3000 页面
2. 页面发送请求获取 app.scss
3. vite server 接收请求走到函数 transformRequest ，接着开始根据请求的地址获取文件 scss 源码
4. 将得到的源码传入 pluginContainer.transform((code, id, map, ssr))。pluginContainer.transform 开始处理scss源码，会调用对应的插件来处理scss源码，内置插件是有顺序的。
   1. 预处理解析 sccs 得到 css：调用cssPlugin 解析 scss 得到 css 代码。中间利用了 postcss
   2. 后处理将 css 包装成 js 代码：调用cssPostPlugin。
5. 处理完资源之后返回给 client，原理类似 jsonp。client 接受到的js中有 css 的数据，会调用 updateStyle 将数据更新到页面上，updateStyle 是 vite 提前注入的，用来创建一个 style 标签，并将 css 的数据放到 style 标签上，然后插入页面，样式生效。

热更新与缓存

封装了 send，默认只有协商缓存etag，强缓存设置为 no-cache。强缓存和协商缓存同时存在的时候，先强缓存后协商缓存。

如果是利用 http 强缓存，不用再次编译。

如果是协商缓存，利用 etag，client会一直询问server的etag签名是否匹配，否则重新编译。

1. ** css 资源则是利用的协商缓存 **
2. 依赖比如 react 这种走的强缓存：浏览器缓存