It’s hot

How are SCSS resources handled between a page (client) and a vite enabled service (server)

  1. Visit the localhost:3000 page
  2. The page sends a request for app.scss
  3. The Vite Server receives the request to the function transformRequest and then begins to obtain the SCSS source file based on the requested address
  4. Will be the source of the incoming pluginContainer. Transform ((code, id, map, SSR)). PluginContainer. Transform starts processing SCSS source, can call the corresponding plug-in to handle SCSS source, plug-ins are order. 1. Preprocessing parsing SCCS to get CSS: call cssPlugin to parse SCSS to get CSS code. Postcss 2. Post-processing wraps CSS into JS code: call cssPostPlugin.
  5. After processing the resource, it is returned to the client, similar to jSONP. The client will call updateStyle to update the CSS data in the JS received by the client. UpdateStyle is pre-injected by Vite to create a style label and place the CSS data on the style label. Then insert the page and the style takes effect.

Hot updates and caching

Send is encapsulated. By default, only negotiation cache ETAG is available, and strong cache is set to no-cache. If both strong cache and negotiated cache exist at the same time, the strong cache precedes the negotiated cache.

If you are using HTTP strong caching, you do not need to compile again.

If the cache is negotiated and eTAG is used, the client will always ask the server if the ETAG signature matches, otherwise recompile.

  1. ** CSS resources take advantage of the negotiated cache **
  2. Rely on strong caches like react: browser caches