HTTP/2 時(shí)代的開啟為前端開發(fā)帶來了最佳體驗(yàn)。
如果你對(duì) HTTP/2 有所了解，那你可能用過它，或者至少想過怎樣能把它融入你的項(xiàng)目中。盡管有很多關(guān)于它如何改變工作流程，提高 Web 速度和效率等方面的猜想，但最佳使用方式還沒有定下來。這里我想講的就是我在之前的項(xiàng)目中所發(fā)現(xiàn)的 HTTP/2 的最佳實(shí)踐。
如果你還不確定什么是 HTTP/2，或者為什么它能改進(jìn)你的工作，可以先看看我介紹背景方面的第一篇文章。
記住：開始之前，我要告訴你，盡管你的瀏覽器可能支持 HTTP/2，但你的服務(wù)器可能不支持。檢查你的主機(jī)托管服務(wù)，看看他們是否提供 HTTP/2 的支持。否則你可能要建立你自己的服務(wù)器。這篇文章并不會(huì)涉及這方面該如何做，但你可以查看 http2 github 頁(yè)面，找一找這方面的工具。
熱身工作
首先組織好你的文件。看一看下面的文件樹結(jié)構(gòu)，作為組織你的樣式表的起點(diǎn)：
這會(huì)把你的樣式分到三個(gè)目錄下面：
setup、global 和 componenets。接下來我會(huì)說明這些目錄對(duì)你的項(xiàng)目有什么用。
setup 目錄
setup 目錄保存所有的變量、函數(shù)、混入minin以及一些正常編譯需要的其它文件的定義。要想讓這個(gè)目錄物盡其用，把這個(gè)目錄下所有內(nèi)容導(dǎo)入到 setup.scss 文件中是個(gè)很不錯(cuò)的主意，這樣這個(gè)文件就會(huì)像下面所展示的一樣：
現(xiàn)在我們能快速引用這個(gè)站點(diǎn)中的所有定義，應(yīng)該確保在所有的樣式文件頂部包含我們這里創(chuàng)建的這個(gè)文件。
global 目錄
接下來的目錄，global 目錄，應(yīng)該包含可在當(dāng)前站點(diǎn)的多個(gè)部分或者每一個(gè)頁(yè)面中重復(fù)使用的組件。像按鈕、文本、主要樣式，以及你的瀏覽器默認(rèn)設(shè)置應(yīng)該放在這里。我不建議把頁(yè)面的頭部或底部樣式放在這兒，因?yàn)槟承╉?xiàng)目中沒有頭部，或者不同頁(yè)面頭部不同。而且，底部永遠(yuǎn)是頁(yè)面的最后一個(gè)元素，所以在用戶加載完當(dāng)前站點(diǎn)的其它東西前，不必過分優(yōu)先考慮加載底部樣式。
記住，如果沒有那些定義在 setup 目錄下的東西，你的 global 樣式就可能沒有作用，你的 global 文件看起來應(yīng)該像這樣：
注意，首先要做的就是導(dǎo)入 setup 樣式。這樣的話，之后的文件都可以引用這個(gè)樣式里的定義。
由于站點(diǎn)內(nèi)的每個(gè)頁(yè)面都需要 global 樣式，我們可以用典型的方式，在 <head> 標(biāo)簽內(nèi)用一個(gè) <link> 標(biāo)簽來加載它們。你所看到的將是一個(gè)十分小巧的 css 文件，或者說理論上小巧的，這取決于你需要多少全局樣式。
最后，你的組件
注意，我沒有在上述目錄樹中的 components 目錄里包含索引文件。這是 HTTP/2 所帶來的效用。直到現(xiàn)在，我們已經(jīng)按照標(biāo)準(zhǔn)步驟構(gòu)建了一個(gè)典型的站點(diǎn)，保持相當(dāng)簡(jiǎn)單的結(jié)構(gòu)，僅選擇全局化那些最重要的樣式。組件充當(dāng)它們自己的索引文件。
大多數(shù)開發(fā)者有獨(dú)特的組織組件的方式，因此我并不想影響你的策略。但是，你所有的組件看起來應(yīng)該像這樣：
同樣的，你要把 setup 樣式包含進(jìn)來，確保所有東西在編譯時(shí)都定義過。除了編譯這些文件，以及可能要把他們放到
/assets 目錄，以便很容易找到模版，對(duì)這些文件你不必 拼接concatenate、壓縮minify 它們或者改變什么。
現(xiàn)在樣式表已經(jīng)差不多了，構(gòu)建站點(diǎn)應(yīng)該很簡(jiǎn)單。
構(gòu)建組件
或許對(duì)于模板語言你有自己的選擇，這取決于你的項(xiàng)目，有可能是 Twig、Rails、Jade 或者 Handlebars。我認(rèn)為考慮組件最好的方式是它是否有自己的模版文件，它該有個(gè)與名字相應(yīng)的樣式。這樣你的項(xiàng)目中，模版和樣式的比例就會(huì)是個(gè)不錯(cuò)的 1:1 的比例，而且你知道哪個(gè)文件有哪些東西，哪里有哪個(gè)文件，因?yàn)樗鼈兊拿怯幸?guī)律的。
現(xiàn)在它正步入正軌，用好 HTTP/2 的多種功能十分簡(jiǎn)單，讓我們做一個(gè)模版：
非常好！在模版里你可能有更簡(jiǎn)單的方式鏈接到資源，但這里顯示你所要做的僅是在開始構(gòu)建時(shí)，在模版文件中鏈接一個(gè)小小的頭部樣式。這將允許你的站點(diǎn)僅僅加載特定資源到任意給定頁(yè)面的組件中，而且，能夠設(shè)定頁(yè)面從頭到腳的組件的優(yōu)先級(jí)。
結(jié)合在一起
現(xiàn)在所有的組件都有結(jié)構(gòu)，瀏覽器將會(huì)類似以下方式來渲染它們：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="all" href="/assets/global.css">
</head>
<body>
<link rel="stylesheet" media="all" href="/assets/components/header.css">
<header>
... etc
</header>
<link rel="stylesheet" media="all" href="/assets/components/title.css">
<section class="title">
... etc
</section>
<link rel="stylesheet" media="all" href="/assets/components/image-component.css">
<section class="image-component">
... etc
</section>
<link rel="stylesheet" media="all" href="/assets/components/text-component.css">
<section class="text-component">
... etc
</section>
<link rel="stylesheet" media="all" href="/assets/components/footer.css">
<footer>
... etc
</footer>
</body>
</html>
這是一個(gè)高級(jí)別方法，但你的項(xiàng)目中可能有調(diào)整的更細(xì)致的組件。例如，在頭部的 <nav>組件可能要加載自己的樣式表。盡你所能地自由發(fā)揮，讓組件更有作用 - HTTP/2 不會(huì)因這些需求而阻礙你！
結(jié)論
這只是一個(gè)關(guān)于如何在前端用 HTTP/2 構(gòu)建項(xiàng)目的基本介紹，僅是皮毛而已。你可能注意到我上面所用的方法有的還有改進(jìn)的空間。請(qǐng)不吝賜教！正如我在第一篇文章中所說的，HTTP/2 可能顛覆自 HTTP/1 以來我們所熟知的某些標(biāo)準(zhǔn)，所以要慎重思考和實(shí)踐，以便高效使用 HTTP/2 的開發(fā)環(huán)境。
via: https://www.viget.com/articles/getting-started-with-http-2-part-2
轉(zhuǎn)自：https://linux.cn/article-8115-1.html?utm_source=weibo&utm_medium=weibo
