vue ssr,webpack 页面初次渲染时CSS加载顺序问题

Question

在页面初次渲染时，会出现一闪而过的无样式的页面内容，随即恢复正常，并非 v-cloak 与遮罩的问题，想请问这部分与加载CSS的顺序是否有关，如果是的话有什么解决方案，望赐教，谢谢！

import './assets/css/element.css';
import './assets/css/editormd.min.css'
import './assets/css/editormd.logo.min.css'

以上为 app.js下对CSS的引入。

test: /\.css$/,
loader: 'vue-style-loader!css-loader'

以上为 webpack对于CSS的打包配置。

第一张图为初次渲染时短暂出现的无样式页面，第二张图为1~2S后渲染完成的页面

Answer 1

vue的ssr在webpack中设置dev模式，css样式就会有异步加载的情况，如果是prod模式，就是阻塞加载，不会看到无样式的排版

Answer 2

如果已经压缩好的css，建议直接在html哪里引入，
如果是没压缩，但是全局都要用到，则在最外层引入那些公用的样式

Answer 3

我用的是react，通过配置 style-loader 解决了，希望能给你提供思路。

    loader: "style-loader",
    options: {
      singleton: true
    }