Vue SSR 中的样式注入与 CSS Critical Path 优化：减少首屏渲染阻塞
大家好，今天我们来聊聊 Vue SSR (Server-Side Rendering) 中样式注入以及如何利用 CSS Critical Path 优化来减少首屏渲染阻塞，提升用户体验。在 SSR 环境下，样式处理尤为重要，它直接影响着用户看到首屏内容的速度。
1. SSR 中样式处理的挑战
在传统的客户端渲染（CSR）中，浏览器会下载 HTML、CSS 和 JavaScript，然后解析并渲染页面。CSS 的加载和解析会阻塞渲染，但通常问题不大，因为浏览器可以并行加载资源。
但在 SSR 中，服务器端需要将 HTML 预先渲染好，再发送给客户端。这意味着：
- 没有浏览器环境的样式解析： 服务器端没有浏览器环境，无法直接解析和应用 CSS。
- 阻塞首屏时间： 如果 CSS 文件太大，或者加载方式不合理，会导致服务器端渲染时间过长，进一步阻塞首屏显示，影响用户体验。
- 闪烁问题 (FOUC, Flash of Unstyled Content)： 如果客户端接收到 HTML 后才开始加载 CSS，可能会出现短暂的无样式内容显示，然后再应用样式，造成视觉上的闪烁。
因此，我们需要在 SSR 中采取特殊的策略来处理样式，既要保证服务器端能够正确渲染，又要尽可能减少对首屏渲染时间的阻塞。
2. Vue SSR 中样式注入的常见方案
为了在服务器端应用样式，我们通常需要将 CSS 注入到渲染后的 HTML 中。以下是几种常见的方案：
2.1. 基于字符串拼接 (String Concatenation)
这是最简单粗暴的方式，直接将 CSS 文件内容读取出来，拼接到 HTML 字符串中。
// server.js
const fs = require('fs');
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();
const app = new Vue({
template: `<div>Hello, SSR!</div>`
});
const css = fs.readFileSync('./dist/style.css', 'utf-8'); // 读取 CSS 文件内容
renderer.renderToString(app, (err, html) => {
if (err) {
console.error(err);
return;
}
const finalHtml = `
<!DOCTYPE html>
<html>
<head>
<title>Vue SSR</title>
<style>${css}</style> <!-- 将 CSS 插入到 style 标签中 -->
</head>
<body>
${html}
</body>
</html>
`;
console.log(finalHtml);
});优点： 简单易懂，易于实现。
缺点：
- 可维护性差：CSS 内容直接嵌入到 JavaScript 代码中，不易维护。
- 不利于代码分割：所有 CSS 都被打包到一个文件中，无法进行代码分割，导致不必要的资源加载。
- 缺乏灵活性：无法根据组件动态加载 CSS。
2.2. 使用 Vue Meta 管理样式
Vue Meta 可以管理页面的 meta 信息，包括 title、description、keywords 等，也可以用来管理样式。
首先，安装 vue-meta：
npm install vue-meta --save然后，在 Vue 应用中注册 vue-meta：
// entry-client.js
import Vue from 'vue';
import App from './App.vue';
import VueMeta from 'vue-meta';
Vue.use(VueMeta);
new Vue({
render: h => h(App)
}).$mount('#app');
// entry-server.js
import Vue from 'vue';
import App from './App.vue';
import VueMeta from 'vue-meta';
Vue.use(VueMeta);
export function createApp() {
const app = new Vue({
render: h => h(App)
});
return { app };
}在组件中使用 metaInfo 选项来定义样式：
// App.vue
<template>
<div>Hello, SSR!</div>
</template>
<script>
export default {
metaInfo: {
style: [
{ cssText: `body { background-color: #f0f0f0; }` }
]
}
};
</script>在服务器端，使用 vue-server-renderer 的 renderToString 方法渲染应用，并获取 meta 信息：
// server.js
const { createApp } = require('./dist/bundle.server.js');
const renderer = require('vue-server-renderer').createRenderer();
const { app } = createApp();
renderer.renderToString(app, (err, html) => {
if (err) {
console.error(err);
return;
}
const meta = app.$meta().inject();
const finalHtml = `
<!DOCTYPE html>
<html>
<head>
<title>${meta.title.text()}</title>
${meta.style.text()}
</head>
<body>
${html}
</body>
</html>
`;
console.log(finalHtml);
});优点：
- 统一管理 meta 信息，包括样式。
- 可以在组件级别定义样式，方便维护。
缺点：
- 需要在组件中定义样式，不够灵活，不适合大型项目。
- 依然存在 CSS 代码直接嵌入到 JavaScript 代码中的问题。
2.3. 使用 Webpack 插件提取 CSS (MiniCssExtractPlugin)
这是目前最流行的方案，利用 Webpack 的插件将 CSS 从 JavaScript 代码中提取出来，生成独立的 CSS 文件。
首先，安装 mini-css-extract-plugin：
npm install mini-css-extract-plugin --save-dev然后，在 Webpack 配置文件中配置 mini-css-extract-plugin：
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'production', // 或者 'development'
entry: './src/entry-client.js', // 客户端入口
output: {
path: __dirname + '/dist',
filename: 'bundle.client.js'
},
module: {
rules: [
{
test: /.vue$/,
use: 'vue-loader'
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: 'style.css' // 提取后的 CSS 文件名
})
]
};在 Vue 组件中引入 CSS 文件：
// App.vue
<template>
<div>Hello, SSR!</div>
</template>
<style src="./App.css"></style>在服务器端，读取提取后的 CSS 文件，并将其插入到 HTML 中：
// server.js
const fs = require('fs');
const { createApp } = require('./dist/bundle.server.js');
const renderer = require('vue-server-renderer').createRenderer();
const { app } = createApp();
renderer.renderToString(app, (err, html) => {
if (err) {
console.error(err);
return;
}
const css = fs.readFileSync('./dist/style.css', 'utf-8');
const finalHtml = `
<!DOCTYPE html>
<html>
<head>
<title>Vue SSR</title>
<style>${css}</style>
</head>
<body>
${html}
</body>
</html>
`;
console.log(finalHtml);
});优点：
- 将 CSS 从 JavaScript 代码中分离出来，方便维护。
- 可以使用 Webpack 的各种 CSS loader 和插件，例如 PostCSS、Sass 等。
- 可以进行代码分割，只加载需要的 CSS。
缺点：
- 配置稍微复杂。
- 仍然需要手动读取 CSS 文件并插入到 HTML 中。
2.4. 使用 vue-style-loader (配合 webpack)
vue-style-loader 是一个 webpack loader，可以将 Vue 组件中的样式动态地注入到 DOM 中。它主要用于客户端渲染，但在 SSR 中也可以发挥作用。它可以配合 vue-loader 和 webpack，在服务器端渲染时收集组件中使用的 CSS，并在客户端渲染时将这些 CSS 注入到 DOM 中。
首先，你需要安装 vue-style-loader：
npm install vue-style-loader -D然后，在 Webpack 配置文件中配置 vue-style-loader：
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'production', // 或者 'development'
entry: './src/entry-client.js', // 客户端入口
output: {
path: __dirname + '/dist',
filename: 'bundle.client.js'
},
module: {
rules: [
{
test: /.vue$/,
use: 'vue-loader'
},
{
test: /.css$/,
use: [
'vue-style-loader', // 注意顺序
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
};在 Vue 组件中引入 CSS 文件：
// App.vue
<template>
<div>Hello, SSR!</div>
</template>
<style src="./App.css"></style>关键在于服务器端的处理。我们需要在服务器端渲染时，收集组件中使用的 CSS。这通常需要使用 vue-server-renderer 的 bundleRenderer，并且需要配置 template 选项，以便将收集到的 CSS 注入到 HTML 中。
// server.js
const fs = require('fs');
const { createApp } = require('./dist/bundle.server.js'); // 这需要是一个 webpack 打包后的 module
const renderer = require('vue-server-renderer').createBundleRenderer(
require('./dist/bundle.server.js'),
{
template: `
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title><style type="text/css">{{ style }}</style></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
`
}
);
const { app } = createApp();
renderer.renderToString(app, (err, html) => {
if (err) {
console.error(err);
return;
}
// `html` 现在是注入了应用程序内容的完整页面
console.log(html);
});注意，vue-style-loader 主要是在客户端注入样式。在 SSR 中，它通过 vue-server-renderer 的 bundleRenderer 和 template 选项，将组件中使用的 CSS 收集起来，并在服务器端渲染时注入到 HTML 中。
优点：
- 简化了服务器端样式注入的流程，不需要手动读取 CSS 文件。
- 与 Vue 组件结合紧密，易于维护。
缺点：
- 需要配置
vue-server-renderer的bundleRenderer和template选项，配置稍微复杂。 - 可能存在 FOUC 问题，因为样式是在客户端注入的。
3. CSS Critical Path 优化
以上方案解决了在 SSR 中注入样式的问题，但并没有解决 CSS 加载阻塞首屏渲染的问题。为了进一步优化首屏渲染时间，我们需要进行 CSS Critical Path 优化。
3.1. 什么是 CSS Critical Path
CSS Critical Path (关键渲染路径) 指的是渲染首屏内容所需的最小 CSS 集合。换句话说，就是那些直接影响首屏显示的 CSS 规则。
3.2. CSS Critical Path 优化策略
CSS Critical Path 优化的目标是：
- 提取 Critical CSS： 识别并提取渲染首屏内容所需的关键 CSS。
- 内联 Critical CSS： 将 Critical CSS 直接内联到 HTML 中，避免额外的 HTTP 请求。
- 异步加载非 Critical CSS： 将非 Critical CSS 异步加载，避免阻塞首屏渲染。
3.3. 如何实现 CSS Critical Path 优化
有几种方法可以实现 CSS Critical Path 优化：
- 手动提取： 通过分析页面结构和样式，手动提取 Critical CSS。这种方法比较繁琐，容易出错，不适合大型项目。
- 使用工具： 使用工具自动提取 Critical CSS。常用的工具有：
- Critical： 一个 Node.js 模块，可以从 HTML 中提取 Critical CSS。
- Penthouse： 另一个 Node.js 模块，也可以提取 Critical CSS。
3.4. 使用 Critical 工具进行优化
以下是如何使用 critical 工具进行 CSS Critical Path 优化的示例：
首先，安装 critical：
npm install critical --save-dev然后，在服务器端渲染后，使用 critical 提取 Critical CSS：
// server.js
const fs = require('fs');
const { createApp } = require('./dist/bundle.server.js');
const renderer = require('vue-server-renderer').createRenderer();
const critical = require('critical');
const { app } = createApp();
renderer.renderToString(app, (err, html) => {
if (err) {
console.error(err);
return;
}
critical.generate({
inline: false, // 不要内联，而是生成一个单独的 critical.css 文件
base: 'dist/', // 样式文件所在的目录
src: html, // 输入的 HTML
target: 'dist/index-critical.html', // 输出的 HTML 文件
css: ['dist/style.css'], // 所有的 CSS 文件
minify: true,
extract: false, // 提取但不删除原始 CSS
width: 1300,
height: 900
}).then(output => {
// output.html: 带有内联 Critical CSS 的 HTML
// output.uncritical: 非 Critical CSS
fs.writeFileSync('dist/index-critical.html', output.html);
console.log("Critical CSS generated successfully!");
const finalHtml = `
<!DOCTYPE html>
<html>
<head>
<title>Vue SSR</title>
<style>${output.css}</style>
<link rel="stylesheet" href="style.css" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
</head>
<body>
${html}
</body>
</html>
`;
console.log(finalHtml);
}).catch(err => {
console.error('Critical error:', err);
});
});说明：
critical.generate函数接受一个配置对象，用于指定输入和输出文件、CSS 文件等。inline: false表示不要将 critical CSS 内联到 HTML 中，而是生成一个单独的critical.css文件。base选项指定了 CSS 文件所在的目录。src选项指定了输入的 HTML 字符串。target选项指定了输出的 HTML 文件名。css选项指定了所有的 CSS 文件。minify: true表示压缩CSS。extract: false表示提取关键CSS，但不从原始CSS中删除。width和height设置关键 CSS 提取的视口大小。
在生成的 HTML 中，Critical CSS 将被内联到 <style> 标签中，而非 Critical CSS 将通过 <link> 标签异步加载。
3.5. 异步加载非 Critical CSS
为了避免非 Critical CSS 阻塞首屏渲染，我们需要使用异步加载的方式。常用的方法有：
- 使用
preload属性：
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>- 使用
media属性：
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">这些技巧允许浏览器在后台加载 CSS 文件，并在加载完成后应用样式，从而避免阻塞首屏渲染。
4. 总结
本篇文章介绍了 Vue SSR 中样式注入的几种常见方案，包括基于字符串拼接、使用 Vue Meta、使用 Webpack 插件提取 CSS 和使用 vue-style-loader。同时，详细讲解了 CSS Critical Path 优化的概念、策略和实现方法，以及如何使用 critical 工具提取 Critical CSS 并异步加载非 Critical CSS。
选择合适的样式注入方案
根据项目规模和需求，选择合适的样式注入方案。小型项目可以选择基于字符串拼接或 Vue Meta，大型项目建议使用 Webpack 插件提取 CSS 或 vue-style-loader。
持续监控和优化
CSS Critical Path 优化是一个持续的过程，需要不断监控和优化。可以使用 PageSpeed Insights 等工具来分析页面性能，并根据分析结果进行调整。
更多IT精英技术系列讲座，到智猿学院