如何使用Webpack将关键CSS打印到index.html中？

我正在开发一个大型的单页应用程序，其中包含由Webpack生成的非常大的CSS和JS文件，这会在应用程序最初加载时导致错误

为了避免这种情况，我想将CSS的关键部分打印到文档的头部，这样当浏览器处理其余的JS&CSS时，文档就不会显示为未设置样式

这个CSS是用SASS编写的，并且依赖于全局应用程序变量，因此webpack必须在将文件打印到文档头之前处理这些文件以将它们从SASS编译到CSS

如何使用Webpack实现这一点？

您需要使用它从js文件中提取并写入单个文件，以便将其链接到html的开头

看看它是如何与一起使用的

我做这件事的方式是

将关键CSS与其自身资产分离

禁用

html网页包插件的默认注入

在模板中手动注入资产

非关键资产通过指向文件（）的链接注入。使用

编译
变量（）内联注入关键CSS

注意。您可以将逻辑放入

HtmlWebpackPlugin

选项中的函数中。答案的最后是一个例子

通过这种方式，可以完全控制资产的包含方式，如标签、属性和位置

有几个插件也可以帮助内联CSS和JS，例如

但它们剥夺了完全控制格式、逻辑和输出的灵活性，取而代之的是有限的配置选项

---

示例配置

插件：[
//...
新HtmlWebpackPlugin({
模板：“索引模板的路径”，
注：错，
injectCriticalCss（htmlWebpackPluginStats，编译）{
返回lodash（htmlWebpackPluginStats.files.chunks）
.map（chunk=>chunk.css）
.flatte（）
.filter（cssFilename=>/^critical\b/.test（cssFilename））
.map（cssFilename=>`${
compilation.assets[cssFilename].source（）
}`)
.join（'\n'）；
},
injectNonCriticalCss（htmlWebpackPluginStats）{
返回lodash（htmlWebpackPluginStats.files.chunks）
.map（chunk=>chunk.css）
.flatte（）
.filter（cssFilename=>！/^critical\b/.test（cssFilename））
.map（cssFilename=>``）
.join（'\n'）；
},
//...
}),
//...
]

然后在模板中

但如何仅用于CSS的一部分？而且，这将加载CSS作为一个外部源，我希望它被打印到头部，js文件中的每个CSS和scss导入将被合并到您提到的CSS文件中，以提取TextPlugin。例如用于entry.js文件的所有导入css或scss文件都将写入指定用于ExtractTextPlugin的css文件。请尝试一下，我相信它会工作。好的，这样我就可以生成CSS的一部分，但它仍然会作为一个外部资源加载它。如何将其打印到头部以便立即可用？这可能会有所帮助。你可以生成一个html文件，而不是创建一个js包。另外，将css保存在头部可以防止未格式化的flash。回答得好，谢谢。但是如何生成关键css本身呢？我正在使用

html关键网页包插件

，它似乎只有在

HtmlWebpackPlugin

完成它的工作后才能生成关键css。@MyTitle，在我的例子中，关键样式是静态的和已知的（它们仅限于文件

critical.styl

）。因此我有一个规则

{test:/^critical\.styl$/，使用：extractCriticalStylesPlugin.extract（…）}

，其中

extractCriticalStylesPlugin

是

ExtractTextPlugin

的一个实例，用于为关键css生成单独的css资产。如上所示，该资产被注入

injectCriticalCss

到

style

标记内的index.html中。不过，我不认为我可以用

html关键网页插件

来设置它。

const extractSass = new ExtractTextPlugin({
  filename: '[name].css',
})

module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: extractSass.extract({
          use: [{
            loader: 'css-loader', options: {
              sourceMap: true,
              minimize: true
            }
          }, {
            loader: 'sass-loader', options: {
              sourceMap: true,
              minimize: true
            }
          }],
          // use style-loader in development
          fallback: 'style-loader'
        })
      }
    ]
  },
  plugins: [
    extractSass,
  ]