阅读 462

vite 中如何处理 scss 文件

热乎~~~

页面(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 这种走的强缓存:浏览器缓存
文章分类
前端