我正在 ES2015 中使用 React 和 Webpack 开发一个项目。
我将样式导入为
导入'../assets/main.scss'
它工作正常，但似乎比页面的其余部分花费的时间更长，所以有一秒钟，一切看起来都很丑陋。
有没有办法在开始渲染页面之前检查样式是否已加载？
最佳答案
"for a second, everything looks very ugly."
这种现象称为FOUC (无样式内容的闪烁)。
解决方案:
既然你正在使用 webpack，那么你也会使用 webpack 加载器。因此，第一级优化可以在 webpack.config.js 中完成。
使用 webpack 的 ExtractTextWebpackPlugin .
It moves every
require("style.css")in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file (styles.css). If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.
粗体文字是我们杀死FOUC的第一把 key 。
示例:
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 使用不同的加载器。
The
ExtractTextPlugingenerates an output file per entry, so you must use[name],[id]or[contenthash]when using multiple entries.
如果您希望为不同的加载器模式提供不同的 bundle ，请创建 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 bundle 和 Webpack 的代码分割 [official doc]
With Code Splitting we can use two different modes:
- Create one css file per initial chunk (see Code Splitting) and embed stylesheets into additional chunks. (recommended)
- Create one css file per initial chunk which also contains styles from additional chunks.
对于大型网络应用程序，将所有代码放入一个文件中效率不高，特别是如果仅在某些情况下需要某些代码块。 Webpack 具有将代码库分割成按需加载的“ block ”的功能。
可以使用 webpack 的 require.ensure 来完成代码分割通过定义多个分割。这很容易配置，请参阅 official doc ，或者我自己的SO answer对于React.js -React-Router -Webpack应用;)
有一个 issue当 css 异步注入(inject)拆分 ExtractTextWebpackPlugin 和 require.ensure 一起使用时报告，这是该问题的非官方解决方案(结合使用 file-loader 和 extract-loader) :
{
test: /\.css$/,
loaders: ["style-loader/url","file?name=app/[name].[hash].css!extract","css-loader","postcss-loader"]
}
需要更多改进？
一旦我们配置了ExtractTextWebpackPlugin，就可以使用PurifyCSS WebPack Plugin来进一步优化CSS。 。
<小时/>This is a plugin for WebPack that utilizes PurifyCSS to clean your CSS and removes unused code.
"Is there a way I can check if the style has been loaded before start rendering the page?"
以下是引用链接列表，解释了一些最小化 FOUC 的通用技术:
关于javascript - React 检查 css 是否已使用 Webpack 和 React 加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40812078/