当vue多个组件都有相同的style,抽取优化过程中遇到的问题及解决办法

分享1:

当vue多个组件都有相同的style,为了避免不必要的资源浪费,我采用@import “样式文件路径”的方式引入外部样式

<style scoped>
@import "assets/css/base.css";
</style>

经过调研,上面方法有很多不足,比如:

1.会造成全局样式污染，即样式不单单只作用于这几个组件，全部组件他都会覆盖，可是我明明加了scoped了呀，为什么还会造成全局污染，原因是：

@import并不是引入代码到里面，而是发起新的请求获得样式资源，并且没有加scoped
因此采用@import的方法引入外部样式时的作用域是全局

2.@import会影响页面的加载速度。当使用@import导入外部css文件时，浏览器需要先下载导入的文件，然后再解析执行。这意味着页面需要等待导入的文件下载完成后才能继续加载，导致页面加载速度变慢。而且，如果有多个@import语句，每个导入文件的下载和解析都需要耗费时间，进一步影响页面性能。

3.@import会增加css文件的请求次数。每个@import语句都会触发一次http请求，而http请求是一种相对消耗资源的操作。当一个页面有多个@import语句时，就会导致多个http请求，增加了服务器的负担和页面加载时间。

4.@import只能在样式表的顶部使用。这意味着如果有一些需要动态加载的样式，无法通过@import来实现。

5.@import是顺序执行的，如果导入的文件中有一些样式被后面的样式覆盖，就会导致样式无法正确生效。

---

为了解决以上问题，我改用标签来引入外部css文件来代替@import。原因是:使用标签可以在页面头部同时加载多个css文件，而且能够并行下载，提高页面加载速度和性能,避免增加不必要的http请求，以及实现更灵活的样式控制。同时，标签还可以使用media属性来指定样式表在不同设备或媒体上的应用方式，实现更灵活的样式控制。具体如下:

• 在style里采用src=“外部样式路径”

<style src="assets/css/base.css"  scoped></style>

分享2:

同一个组件内新写样式

要是在写新的样式，要重新写一个新的style标签

<style src="@/style/reset.css"  scoped></style>
<style scoped>
  //新的css样式
</style>