React 检查 css 是否已加载 Webpack 和 React

Question

React 检查 css 是否已加载 Webpack 和 React

Pab*_*blo 1 javascript reactjs

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

我将样式导入为

import '../assets/main.scss'

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

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

Answer 1

Yad*_*ran 8

“有那么一瞬间，一切看起来都非常难看。”

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

解决方案：

由于您使用的是 webpack，因此您也将使用 webpack 加载器。所以第一级优化可以在你的webpack.config.js.

使用 webpack 的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')
    ]
}

Run Code Online (Sandbox Code Playgroud)

您可以进一步调整它以使用不同的加载器.scss或.less。

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

ExtractTextWebpackPlugin为不同的加载器模式创建多个实例（如API 文档的最后一节所述）。

那么我们实现了什么？

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

Nota Bene：有一些使用注意事项，ExtractTextWebpackPlugin在原始文档页面中也有描述。

分离 CSS 包和 Webpack 的代码拆分 [官方文档]

通过代码拆分，我们可以使用两种不同的模式：

为每个初始块创建一个 css 文件（请参阅代码拆分）并将样式表嵌入到其他块中。（受到推崇的）

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

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

代码拆分可以require.ensure通过定义多个拆分使用 webpack 来完成。这很容易配置，请参阅官方文档，或者我自己对React.js - React-Router - Webpack应用程序的SO 答案；)

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

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

Run Code Online (Sandbox Code Playgroud)

需要更多改进吗？

一旦我们配置好了ExtractTextWebpackPlugin，就可以使用PurifyCSS WebPack Plugin进一步优化 CSS 。

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

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

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

归档时间：	9 年，9 月前
查看次数：	2195 次
最近记录：	9 年，9 月前