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

在页面初次渲染时,会出现一闪而过的无样式的页面内容,随即恢复正常,并非 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后渲染完成的页面

回答:

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

回答:

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

回答:

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注