本文翻译自 What Is CSS @import And Why Can It Slow Down Websites?，略有删改

CSS@import能够用来加载其余CSS款式的便捷形式，然而应用它也会使网站的资源出现变得更慢，导致网站出现的工夫更长。

什么是CSS @import？

加载CSS文件最常见的办法是应用link标签：

<link rel="stylesheet" type="text/css" href="link.css" />

另一种办法是在另一个样式表中援用一个样式表，应用CSS中的@import "url"：

@import "imported.css";/*contents of link.css */

然而这样浏览器在加载初始CSS文件后会启动另一个样式表得申请。

为什么CSS @import会让你的网站变慢？

大多数CSS文件都会阻止资源，这意味着浏览器必须先下载它们，而后能力向用户显示页面内容。

当增加多个样式表而不应用@import时（通常在HTML中应用link标签），浏览器能够并行下载它们。

相比之下，应用@import在另一个CSS文件中援用一个CSS文件意味着它们是按程序下载的，这须要更长的时，因而网站加载速度较慢。

例如，在CSS文件中导入Google Fonts时常常会产生这种状况。

这个申请瀑布图展现了@import创立了一个程序依赖，从而减慢网站的速度。Google字体CSS要在style.css下载后能力开始加载。

如何防止应用@import

应用规范<link>标签代替@import。如果能够编辑源CSS文件，请删除@import，并应用<link>标签在HTML文档中援用CSS文件。

而不是在CSS文件中执行此操作：

在你的HTML中按如下应用：

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Press+Start+2P"/>

如果你不能编辑CSS文件，你能够应用预加载资源提醒来帮忙浏览器更快地发现（和下载）@import资源。

<link rel="stylesheet" href="parentCSS.css"/><link rel="preload" href="//fonts.googleapis.com/css?family=Press+Start+2P" as="font"/>

如何查看您的网站是否应用@import

  • 转到 debugbear.com/test
  • 输入您网站的URL
  • 向下滚动至倡议
  • 查看倡议是否包含删除@import

论断：CSS导入与链接

尽可能应用link标签而不是CSS @import，以便您的网站尽可能快地出现。

当无奈应用link标签时，请思考应用预加载加载蕴含@import的样式表。

最初

在古代脚手架搭建的我的项目中，在开发代码中应用的@import最终编译是会合并在一起的，不会存在这种问题，如果在编译过程中没有做非凡解决的状况则须要关注一下这块的影响。看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）