首屏渲染速度直接决定用户对页面性能的感知。为了让浏览器尽快绘制出首屏内容，前端构建阶段通常需要把首屏用到的CSS单独提取出来，并以内联方式放进HTML的头部。Webpack作为主流构建工具，可以通过相应插件自动化完成这项工作，减少手动维护成本。
为什么要提取首屏关键CSS？
浏览器渲染页面时，CSS会阻塞渲染。外部样式表需要先下载、解析并构建CSSOM，之后才会开始布局和绘制。如果样式文件很大，首屏内容已经出现在HTML中，浏览器却必须等待整个CSS文件下载完成才能显示，这就会产生白屏时间。提取首屏关键CSS的思路是：只把首屏可见区域用到的样式规则内联到HTML的<style>标签中，让浏览器无需额外请求即可完成首屏绘制。
非关键CSS则可以延迟加载，等首屏渲染完成后再异步获取。这样既保证了首屏速度，又不会丢失后续页面的样式。这种做法在移动端弱网环境下收益尤其明显，因为减少一次关键网络请求能显著降低可交互时间。
手动提取关键CSS非常繁琐，需要知道每个页面首屏包含哪些元素以及它们依赖的样式规则。借助工具自动分析可以大大提高效率。Webpack生态中的html-critical-webpack-plugin就是基于Headless Chrome实现自动化提取的插件。
在Webpack中配置critical-css提取
安装依赖直接使用npm即可。这个插件会启动一个无头浏览器访问构建后的HTML文件，分析首屏渲染时实际用到的CSS规则，并将这些规则提取出来内联到HTML头部。
npm install html-critical-webpack-plugin --save-dev
在webpack配置文件中引入插件，并配合html-webpack-plugin一起使用。下面是一个基本配置示例：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlCriticalWebpackPlugin = require('html-critical-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new HtmlCriticalWebpackPlugin({
base: path.resolve(__dirname, 'dist'),
src: 'index.html',
dest: 'index.html',
inline: true,
minify: true,
extract: true,
width: 375,
height: 565,
penthouse: {
blockJSRequests: false
}
})
]
};
其中base指向构建输出目录，src和dest指定要处理的HTML文件，通常直接覆盖原文件。宽高参数用于模拟首屏视口，移动端项目可以设为375x565，桌面端可调整为1366x768。插件会启动浏览器访问本地生成的页面，记录首屏元素对应的选择器，再从完整CSS中抽取这些选择器的规则。
提取完成后，HTML的<head>区域会多出一段内联样式，原始的外部CSS链接会被标记为延迟加载。这样可以确保首屏样式优先可用，后续样式在空闲时补充。
处理非关键CSS与异步加载
关键CSS内联之后，原始的完整样式文件不能直接保留，否则会造成重复加载和样式覆盖。插件通常会修改外部样式表链接，将其转换为异步加载方式。常见做法是利用<link>的preload属性，配合onload事件切换为stylesheet。
<head> <style>/* 首屏关键CSS已内联 */</style> <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="styles.css"></noscript> </head>
这样浏览器会在空闲时下载完整CSS，下载完成后自动应用。对于禁用JavaScript的环境，noscript中的回退链接保证样式仍然可用。需要注意，异步加载CSS可能导致页面出现无样式内容闪烁，但由于关键CSS已经覆盖首屏，后续内容的影响较小。
如果插件没有自动处理异步加载，可以手动修改HTML模板，将外部样式链接改成preload方式。也可以使用loadCSS这类轻量脚本辅助加载，不过现代浏览器对preload的支持已经足够好，直接使用原生方式更简洁。
多页面与构建缓存优化
在单页应用中，通常只有一个HTML入口，提取首屏关键CSS比较简单。但如果是多页面应用，每个页面首屏内容不同，需要为每个HTML分别生成对应的内联样式。可以在Webpack配置中为多个入口分别创建HtmlWebpackPlugin实例，再为每个实例配置对应的HtmlCriticalWebpackPlugin。
构建缓存方面，关键CSS提取依赖浏览器分析，每次构建都会启动无头浏览器，耗时较长。建议在开发环境关闭该插件，只在生产构建时启用。同时可以缓存提取结果，避免样式未变化时重复分析。部分插件支持设置缓存目录，可以在配置中指定。
动态路由场景下，首屏内容可能根据用户状态或异步数据变化，静态分析只能覆盖初始渲染部分。此时可以结合代码分割和路由级样式加载，将关键CSS的提取粒度细化到每个路由组件，确保切换页面时也能快速呈现。
实际项目中，还要注意第三方库样式可能很大，但首屏用到的很少。提取关键CSS后可以将这些库样式也改为异步加载，进一步减小首屏内联体积。测试时建议对比提取前后的首屏时间、白屏时间和可交互时间，根据数据调整视口尺寸与提取范围，避免过度提取导致HTML体积膨胀。
Webpackcritical CSS首屏渲染修改时间：2026-09-27 22:05:19