Question

我在ES2015中使用Webpack在React中开发了一个项目。

我将样式导入为

Image { id: icon anchors.centerIn: parent source: "cloud.svg" sourceSize.width: 50 sourceSize.height: 50 width: 50 height: 50 }

它工作正常，但似乎需要比页面的其余部分更长的时间，所以一秒钟，一切看起来都很难看。

有没有办法在开始渲染页面之前检查样式是否已加载？

Answer 1

＆＃34;一秒钟，一切看起来都很难看。＆＃34;

这种现象称为FOUC（无格式内容的Flash）。

解决方案：

由于您使用的是webpack，因此您也在使用webpack加载器。因此，可以在webpack.config.js。

中完成第一级优化

使用网络包ExtractTextWebpackPlugin。

它将条目块中的每个require("style.css")移动到一个单独的块中 css输出文件。所以你的风格不再内联到了 javascript，但在css包文件（styles.css）中分开。如果你的总样式表量很大，因为它会更快 样式表包与javascript包并行加载。

粗体文字是我们杀死FOUC的第一把钥匙。

示例：

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    module: {
        loaders: [
            // Extract CSS during build
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style', 'css')
            }
        ]
    },
    plugins: [
        // Output extracted CSS to a file
        new ExtractTextPlugin('[name].[chunkhash].css')
    ]
}

您可以进一步调整此选项，以便为.scss或.less使用不同的加载器。

ExtractTextPlugin为每个条目生成一个输出文件，所以你使用多个时必须使用[name]，[id]或[contenthash] 条目。

如果您需要针对不同加载器模式的不同包，请创建ExtractTextWebpackPlugin的多个实例（如API doc的最后一部分所述）。

那么我们取得了什么？

整齐地将样式与JavaScript分开
较少的样式标签（较旧的IE有限制）
CSS SourceMap（devtool: "source-map"和css-loader?sourceMap）
与JS并行加载CSS（不必等待JavaScript加载以获取样式信息）
单独缓存我们的CSS文件和较小的JS文件。
更快的运行时间（更少的代码和DOM操作）

Nota Bene：使用ExtractTextWebpackPlugin时有一些注意事项，这些注意事项也在原documentation page中有所描述。

单独的CSS捆绑包和Webpack的代码拆分 [official doc]

使用Code Splitting，我们可以使用两种不同的模式：


为每个初始块创建一个css文件（请参阅Code Splitting）和   将样式表嵌入到其他块中。（推荐）

每个初始块创建一个css文件，其中还包含其他块的样式。

对于大型网络应用程序，将所有代码放入单个文件并不高效，尤其是在某些情况下仅需要某些代码块时。 Webpack具有将代码库拆分为按需加载的“块”的功能。

可以通过定义多个拆分使用webpack＆＃39; s require.ensure来完成代码拆分。对于official doc - SO answer - React.js应用，请参阅React-Router或我自己的Webpack非常容易配置;）

当css拆分ExtractTextWebpackPlugin和require.ensure的异步注入一起使用时报告了一个issue，这里是非官方的解决方案（使用文件加载器和提取-loader合并）：

{
     test: /\.css$/,
     loaders: ["style-loader/url","file?name=app/[name].[hash].css!extract","css-loader","postcss-loader"]
}

需要更多改进吗？

配置ExtractTextWebpackPlugin后，可以使用PurifyCSS WebPack Plugin进一步优化CSS。

这是一个WebPack插件，它使用PurifyCSS来清理CSS并删除未使用的代码。

＆＃34;有没有办法在开始渲染页面之前检查样式是否已加载？＆＃34;

这是一个参考链接列表，解释了一些最小化FOUC的一般技术：

如果css已加载Webpack和React，请检查

1 个答案:

解决方案：