解决vue ssr css内联样式和link标签重复问题

Posted 2023-04-30

参考技术A 基于vue-cli3的项目，改造成SSR。
服务端渲染会提取组件的样式内联到html中，与link标签中的重复，使得页面体积变大，导致响应时间很慢。
原因是ssr会自动进行资源注入 Manual Asset Injection ，包含css、js等。

我们需要的是没有<style>标签的页面

所以通过配置参数，关闭资源注入。

接下来需要把css、js等文件再关联到输出的html中
当创建bundlerender的时候，我们可以使用一个模板，在这个模板里面预置页面所需要的各种资源。

思来想去，csr（客户端渲染）模式下生成的index.html再合适不过了。
而且，当build csr时，我们也可以预置一个模板，在这里添加上第三方的资源

最后是在模板中添加锚点

到这里基本大功告成

贴一下vue.config.js和build script(windows 平台)

css的学习心得

css可以理解为一层一层的样式，并且是可以重叠覆盖的，通过改变样式，从而改变显示出来的效果

添加css有三种方式

1、内联;写在便签的内部

2、内嵌;写在head标签的内部

3、外部引用;还是写在head标签中，不过是通过link标签将外部的样式引入到html中

我们通常选择第三种

 

有了样式同样需要解决给谁用的问题

选择器 设在标签内部

通用选择器* 给所有的选择器用，遍布整个body

id选择器  #id值  只能有一个

标签选择器  :标签名

class选择器  .class值  一般多用class选择器

还有一些其他的选择器，常用的有

1、包含选择：通过A找到A包含的所有的B  B不分级别

A  B{   }    

2、子选择：只能命中子辈 下属的级别不能被命中到

A>B{   }

3、补充伪类选择器中的  A:first-child

在ul中如果要想选择第一个li   则需要这么写  li：first-child

A原则必须是某个元素的子元素 ，则 li必须要是ul中的第一个子元素

同理 last-child也一样

 

 

先用谁：优先级 正常情况下，相同选择器，像同样式 后面覆盖前面
权值 权值越大优先级越高
行内1000
id 100
class 10
标签 1
通用 0