Vue SSR中的样式注入与CSS Critical Path优化：减少首屏渲染阻塞 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue SSR 中的样式注入与 CSS Critical Path 优化：减少首屏渲染阻塞

大家好，今天我们来聊聊 Vue SSR（服务端渲染）中一个非常重要的环节：样式注入与 CSS Critical Path 优化。服务端渲染虽然带来了更好的 SEO 和更快的首屏渲染速度，但如果样式处理不当，反而会阻塞首屏渲染，适得其反。因此，我们需要深入理解 SSR 环境下样式处理的特殊性，并采取相应的优化策略。

1. SSR 中的样式处理难点

在传统的 CSR（客户端渲染）应用中，浏览器会下载 HTML、CSS 和 JavaScript 文件，然后逐步解析和渲染页面。CSS 通常通过 <link> 标签引入，浏览器会异步下载 CSS 文件，并在下载完成后开始解析和应用样式。这种方式在用户体验上相对流畅，因为浏览器可以并行处理多个资源。

但在 SSR 应用中，服务器需要先将整个页面的 HTML 结构渲染完毕，然后再返回给客户端。这意味着如果 CSS 文件没有被正确处理，服务器在渲染 HTML 时就无法应用样式，导致客户端接收到的 HTML 缺少样式信息，出现“闪屏”现象（FOUC，Flash of Unstyled Content）。

此外，如果 CSS 文件过大，服务器需要花费更多的时间来处理 CSS，这会增加服务器的渲染时间，降低首屏渲染速度。

因此，在 SSR 应用中，我们需要解决以下几个关键问题：

如何在服务器端正确地应用 CSS 样式？
如何避免 FOUC 现象？
如何优化 CSS 加载，减少首屏渲染时间？

2. 服务器端样式注入方案

为了在服务器端正确地应用 CSS 样式，我们需要将 CSS 代码注入到 HTML 模板中。目前常见的方案有以下几种：

2.1. 使用 `vue-style-loader/serverPlugin`

vue-style-loader 是 vue-loader 的一个补充，专门用于处理 Vue 组件中的样式。它提供了一个 serverPlugin，可以将 Vue 组件中的样式提取出来，并注入到 HTML 模板中。

工作原理：

vue-style-loader/serverPlugin 会在服务器端构建过程中，收集所有 Vue 组件中使用的 CSS 代码，并将它们转换为一个字符串。然后，它会将这个字符串注入到 HTML 模板的 <head> 标签中。

优点：

集成简单，与 vue-loader 无缝配合。
可以处理各种 CSS 预处理器（如 Sass、Less）。
自动生成 CSS Modules 的 hash 类名，避免样式冲突。

缺点：

所有 CSS 代码都会被打包到一个文件中，可能会导致文件过大。
不支持 CSS 代码分割，无法按需加载 CSS。

代码示例：

首先，安装 vue-style-loader：

npm install vue-style-loader -D

然后，在 vue.config.js 中配置 vue-loader：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          return {
            ...options,
            compilerOptions: {
              preserveWhitespace: false
            }
          }
        })
        .end()
  }
}

接着，在服务器入口文件中使用 vue-style-loader/serverPlugin：

// server.js
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();
const createApp = require('./app');
const { renderToString } = require('vue-server-renderer');
const VueStyleLoader = require('vue-style-loader/serverPlugin');

module.exports = function(context) {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp();

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();

      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }

      renderToString(app, { vueStyleLoader: VueStyleLoader })
        .then(html => {
          const { title, meta } = app.$meta().inject();

          resolve({
            html,
            title: title.text(),
            meta: meta.inject()
          });
        })
        .catch(reject);
    }, reject);
  });
};

最后，在 entry-server.js 中：

// entry-server.js
import { createApp } from './app'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp()

    router.push(context.url)

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()

      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      context.rendered = () => {
        context.state = app.$store.state
      }

      resolve(app)
    }, reject)
  })
}

2.2. 使用 `styled-components` 或 `emotion`

styled-components 和 emotion 都是 CSS-in-JS 库，它们允许你在 JavaScript 代码中编写 CSS 样式。在 SSR 环境下，它们可以自动将 CSS 样式提取出来，并注入到 HTML 模板中。

工作原理：

styled-components 和 emotion 会在服务器端渲染过程中，收集所有组件中定义的 CSS 样式，并将它们转换为一个字符串。然后，它们会将这个字符串注入到 HTML 模板的 <head> 标签中。

优点：

样式与组件紧密结合，易于维护。
自动生成 CSS Modules 的 hash 类名，避免样式冲突。
支持 CSS 代码分割，可以按需加载 CSS。
可以利用 JavaScript 的特性来动态生成 CSS 样式。

缺点：

需要学习新的 CSS 编写方式。
可能会增加 JavaScript 代码的体积。
性能方面可能不如传统的 CSS 文件。

代码示例：

首先，安装 styled-components：

npm install styled-components

然后，在组件中使用 styled-components 定义样式：

// MyComponent.vue
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

export default {
  template: `
    <Title>Hello Styled Components</Title>
  `
};

接着，在服务器入口文件中使用 styled-components 的 ServerStyleSheet：

// server.js
import Vue from 'vue';
import { renderToString } from 'vue-server-renderer';
import styled, { ServerStyleSheet } from 'styled-components';
import createApp from './app';

module.exports = function(context) {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp();

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();

      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }

      const sheet = new ServerStyleSheet();
      const appHtml = renderToString(sheet.collectStyles(app));
      const styleTags = sheet.getStyleTags();

      const { title, meta } = app.$meta().inject();

      resolve({
        html: appHtml,
        title: title.text(),
        meta: meta.inject(),
        style: styleTags
      });
    }, reject);
  });
};

2.3. 使用 `extract-css-chunks-webpack-plugin`

extract-css-chunks-webpack-plugin 是一个 Webpack 插件，可以将 CSS 代码提取到单独的文件中。在 SSR 环境下，它可以将 Vue 组件中的 CSS 代码提取出来，并生成多个 CSS 文件。然后，你可以手动将这些 CSS 文件的链接添加到 HTML 模板中。

工作原理：

extract-css-chunks-webpack-plugin 会在构建过程中，收集所有 Vue 组件中使用的 CSS 代码，并将它们按照 chunk 分割成多个 CSS 文件。然后，它会生成一个 manifest 文件，记录每个 chunk 对应的 CSS 文件路径。

优点：

可以实现 CSS 代码分割，按需加载 CSS。
可以利用浏览器缓存，提高页面加载速度。
可以结合 CSS Critical Path 优化策略，优先加载首屏需要的 CSS 代码。

缺点：

配置相对复杂。
需要手动将 CSS 文件的链接添加到 HTML 模板中。

代码示例：

首先，安装 extract-css-chunks-webpack-plugin：

npm install extract-css-chunks-webpack-plugin -D

然后，在 vue.config.js 中配置 extract-css-chunks-webpack-plugin：

// vue.config.js
const ExtractCssChunks = require("extract-css-chunks-webpack-plugin");

module.exports = {
  configureWebpack: {
    plugins: [
      new ExtractCssChunks({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ]
  },
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          return {
            ...options,
            compilerOptions: {
              preserveWhitespace: false
            }
          }
        })
        .end()
  }
};

接着，在服务器入口文件中，读取 manifest 文件，并将 CSS 文件的链接添加到 HTML 模板中：

// server.js
const Vue = require('vue');
const { renderToString } = require('vue-server-renderer');
const createApp = require('./app');
const manifest = require('./dist/vue-ssr-client-manifest.json');
const fs = require('fs');

module.exports = function(context) {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp();

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();

      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }

      renderToString(app, { vueStyleLoader: VueStyleLoader })
        .then(html => {
          const { title, meta } = app.$meta().inject();

          const cssLinks = Object.keys(manifest.css).map(file => {
            return `<link rel="stylesheet" href="${manifest.css[file]}">`;
          }).join('');

          resolve({
            html,
            title: title.text(),
            meta: meta.inject(),
            css: cssLinks
          });
        })
        .catch(reject);
    }, reject);
  });
};

3. CSS Critical Path 优化

CSS Critical Path 优化是指提取首屏渲染所需的 CSS 代码，并将其内联到 HTML 模板中，以减少首屏渲染时间。这种方法可以避免浏览器下载额外的 CSS 文件，从而加快首屏渲染速度。

工作原理：

分析页面的 HTML 结构，确定首屏需要渲染的元素。
提取这些元素对应的 CSS 样式。
将这些 CSS 样式内联到 HTML 模板的 <style> 标签中。
延迟加载剩余的 CSS 样式。

优点：

可以显著提高首屏渲染速度。
可以避免 FOUC 现象。

缺点：

需要进行 CSS 代码分析，工作量较大。
可能会增加 HTML 模板的体积。
内联的 CSS 代码无法被浏览器缓存。

实现方案：

手动提取： 手动分析页面的 HTML 结构和 CSS 代码，提取首屏需要的 CSS 样式，并将其内联到 HTML 模板中。这种方法比较繁琐，容易出错，但可以精确控制内联的 CSS 代码。
使用工具： 使用工具自动提取首屏需要的 CSS 样式，并将其内联到 HTML 模板中。目前常见的工具包括：
- Critical： 一个 Node.js 模块，可以自动提取首屏需要的 CSS 样式，并将其内联到 HTML 模板中。
- Penthouse： 另一个 Node.js 模块，可以自动提取首屏需要的 CSS 样式，并将其内联到 HTML 模板中。

代码示例（使用 Critical）：

首先，安装 critical：

npm install critical -D

然后，在服务器端渲染完成后，使用 critical 提取首屏需要的 CSS 样式，并将其内联到 HTML 模板中：

// server.js
const Vue = require('vue');
const { renderToString } = require('vue-server-renderer');
const createApp = require('./app');
const critical = require('critical');
const fs = require('fs');

module.exports = function(context) {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp();

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();

      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }

      renderToString(app, { vueStyleLoader: VueStyleLoader })
        .then(html => {
          const { title, meta } = app.$meta().inject();

          critical.generate({
            inline: false,
            base: './dist',
            src: html,
            target: {
              css: 'critical.css',
              html: 'index.html',
              uncritical: 'rest.css'
            },
            width: 1300,
            height: 900
          }).then(output => {
            resolve({
              html: output.html,
              title: title.text(),
              meta: meta.inject()
            });
          });

        })
        .catch(reject);
    }, reject);
  });
};

4. 延迟加载剩余的 CSS 样式

在完成 CSS Critical Path 优化后，我们需要延迟加载剩余的 CSS 样式，以避免阻塞首屏渲染。常见的延迟加载方案包括：

使用 preload 标签： preload 标签可以预加载 CSS 文件，但不会阻塞页面的渲染。
使用 JavaScript 动态加载： 使用 JavaScript 代码动态创建 <link> 标签，并将 CSS 文件的链接添加到该标签中。
使用 loadCSS 库： loadCSS 是一个 JavaScript 库，可以异步加载 CSS 文件，并提供了一些额外的功能，如媒体查询支持。

代码示例（使用 loadCSS）：

首先，下载 loadCSS 库，并将其添加到项目中。

然后，在 HTML 模板中添加以下代码：

<link rel="stylesheet" href="path/to/rest.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="path/to/rest.css"></noscript>

5. 总结：关键在于优化，选择合适的方案

在 Vue SSR 中，样式注入与 CSS Critical Path 优化是提高首屏渲染速度的关键环节。我们需要根据项目的实际情况，选择合适的方案，并不断进行优化，以达到最佳的性能。

以下表格总结了各种方案的优缺点，方便大家选择：

方案	优点	缺点
`vue-style-loader/serverPlugin`	集成简单，与 `vue-loader` 无缝配合；可以处理各种 CSS 预处理器；自动生成 CSS Modules 的 hash 类名。	所有 CSS 代码打包到一个文件；不支持 CSS 代码分割。
`styled-components` / `emotion`	样式与组件紧密结合，易于维护；自动生成 CSS Modules 的 hash 类名；支持 CSS 代码分割；可以利用 JavaScript 的特性来动态生成 CSS 样式。	需要学习新的 CSS 编写方式；可能会增加 JavaScript 代码的体积；性能方面可能不如传统的 CSS 文件。
`extract-css-chunks-webpack-plugin`	可以实现 CSS 代码分割，按需加载 CSS；可以利用浏览器缓存；可以结合 CSS Critical Path 优化策略，优先加载首屏需要的 CSS 代码。	配置相对复杂；需要手动将 CSS 文件的链接添加到 HTML 模板中。
CSS Critical Path 优化	显著提高首屏渲染速度；避免 FOUC 现象。	需要进行 CSS 代码分析，工作量较大；可能会增加 HTML 模板的体积；内联的 CSS 代码无法被浏览器缓存。

希望今天的分享对大家有所帮助。谢谢！

6. 其他优化策略和注意事项

除了上面提到的方案，还有一些其他的优化策略和注意事项可以帮助我们更好地处理 Vue SSR 中的样式：

使用 CSS Modules： CSS Modules 可以自动生成 CSS 类的 hash 值，避免样式冲突。
避免使用全局样式： 全局样式容易导致样式冲突，应该尽量避免使用。
压缩 CSS 代码： 压缩 CSS 代码可以减少文件体积，提高加载速度。
使用 CDN 加速： 将 CSS 文件部署到 CDN 上，可以利用 CDN 的缓存和加速功能，提高加载速度。
监控性能指标： 使用工具监控首屏渲染时间等性能指标，及时发现和解决问题。

7. 未来发展趋势：更智能化的样式处理

随着前端技术的不断发展，未来的样式处理方案将会更加智能化，例如：

自动 CSS 代码分割： 自动分析页面的依赖关系，将 CSS 代码分割成更小的 chunk，按需加载。
AI 驱动的 CSS Critical Path 优化： 利用 AI 技术自动分析页面的 HTML 结构和 CSS 代码，提取首屏需要的 CSS 样式，并将其内联到 HTML 模板中。
WebAssembly 驱动的样式引擎： 使用 WebAssembly 实现更高效的样式引擎，提高渲染性能。

这些新的技术将进一步提高 Vue SSR 的性能和用户体验。

8. 保持学习，才能持续进步

样式处理是前端开发中一个非常重要的环节，尤其是在 SSR 环境下。我们需要不断学习新的技术和方法，才能更好地解决实际问题，提高应用的性能和用户体验。

更多IT精英技术系列讲座，到智猿学院