nthouse: {
blockJSRequests: false,
}
});
执行时，会将Webpack打包输出文件中HTML更新为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Critical</title>
<style type="text/css">
/* 关键CSS通过内部样式表方式引入 */
body {
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857;
color: #333;
background-color: #fff;
}
...
</style>
<link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">
<noscript>
<link href="/style.96106fab.css" rel="stylesheet">
</noscript>
<script>
/*用来加载非关键CSS的脚本*/
</script>
</head>
<body>
<!-- 这里是App的内容 -->
<script type="text/java script" src="/build_main.js"></script>
</body>
</html>
它还将输出一个新的CSS文件，例如style.96106fab.css（文件自动Hash命名）。这个CSS文件与原始样式表相同，只是不包含关键CSS。
内联嵌入关键CSS样式
你会注意到，关键CSS已经嵌入到文档的头部。这是最佳的，因为页面不必从服务器加载它。
预加载非关键CSS
你还会注意到，非关键CSS使用了一个看起来更复杂的link标签来加载。rel="preload"通知浏览器开始获取非关键CSS以供之后用。其关键在于，preload不阻塞渲染，无论资源是否加载完成，浏览器都会接着绘制页面。
link标签中的onload属性允许我们在非关键CSS加载完成时运行脚本。Critical模块可以自动将此脚本嵌入到文档中，这种方式提供了将非关键CSS加载到页面中的跨浏览器兼容方法。
<link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">
把Critical组件添加到webpack打包流程中
我创建了一个名为HTML Critical Webpack Plugin的插件，该插件仅仅是Critical模块的封装。它将在HTML Webpack Plugin输出文件后运行。
你可以在Webpack的项目中这样引入：
const HtmlCriticalPlugin = require("html-critical-webpack-plugin");
module.export = {
...
plugins: [
new HtmlWebpackPlugin({ ... }),
new ExtractTextPlugin({ ... }),
new HtmlCriticalPlugin({
base: path.join(path.resolve(__dirname), 'dist/'),
src: 'index.html',
dest: 'index.html',
inline: true,
minify: true,
extract: true,
width: 375,
height: 565,
penthouse: {
blockJSRequests: false,
}
})
]
};
注意：你应该只在生产版本中使用，因为它将使你的开发环境的构建很慢
表现结果
现在已经抽离了关键CSS，并且把非关键CSS的加载放到空闲时间，这在性能方面会有怎样的提升呢?
我使用Chrome的Lighthouse扩展插件进行测试。请记住，我们尝试优化的指标是“首次有效绘制”，也就是用户需要多久才能看到真正可浏览的页面。
不使用区分关键CSS技术的表现
使用区分关键CSS技术的表现
正如你所看到的，我的应用程序First Meaningful paint时间缩短了将近1秒，到达可交互状态的时间节省了0.5秒。实际中，你的应用程序可能无法获得如此惊人的改善，因为我的CSS很笨重（我包含了整个Bootstrap库），而且在这样一个简单的应用程序中，我没有很多关键CSS规则。
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
iKcamp官网：http://www.ikcamp.com