[譯] 在 HTTP/2 的世界裡管理 CSS 和 JS

<b>本文講的是[譯] 在 HTTP/2 的世界裡管理 CSS 和 JS，</b>

<b></b>

使用了 HTTP/2，在網站中傳輸 CSS 和 JS 将變得完全不同，本文是結合我實踐的一份指南。

這是我們多年來作為最佳實踐的反例。但為了汲取多路複用的好處，最好的方式還是把你的 CSS 拆分成更小的檔案，這樣在每一頁隻加載必要的CSS。應該像這個例子這樣：

經過一些實踐，這是我整理的 SCSS 檔案結構：

CONFIG 檔案夾

我使用這個檔案夾設定一堆變量：

這裡的入口檔案是 <code>_index.scss</code>，它引入了所有其他 SCSS 檔案，是以我可以通路到一些變量和 mixins。它是這樣的：

FUNCTIONS 檔案夾

顧名思義，它包含了一些常見的 mixins 和函數，每一個 mixin 或函數都對應一個檔案。

GLOBAL 檔案夾

這個檔案夾包含我每一頁都使用的 CSS。特别适合放一些類似網站的 header、footer、reset、字型和其他通用樣式之類的東西。

<code>index.scss</code> 看起來是這樣的:

最後一行引入了所有 components 的子目錄，這是将額外全局樣式子產品化的捷徑。

MODULES 檔案夾

這是我們 HTTP/2 體系中最重要的檔案夾。當我拆分樣式到對應的子產品，這個檔案夾會包含非常非常多的檔案。是以我從拆分每一個子產品到子目錄開始：

每個子產品中的 <code>index.scss</code> 是這樣的：

這樣我可以通路到變量和 mixin，然後我可以把子產品的 CSS 拆分為許多部分，它們組合成一個單獨的 CSS 子產品檔案。

PAGES 檔案夾

實質上這個檔案夾和 modules 檔案夾一樣，但我為了頁面特定的内容使用它”。這種更子產品化的方式在我們最近做的東西裡絕對罕見，但是它很好地把頁面的特殊樣式拆分出來了。

duang，這樣就完成了管理 SCSS 的 HTTP/2 配置。

很長一段時間以來，我們在 Viget 都主張使用 Craft，我就寫了一個宏來減少這種引入樣式的方式：

當我想要引入一個子產品的 CSS 檔案，我隻需這樣：

如果我需要在整個網站上放置樣式表引用，這就更簡單了。

我使用的是 <code>import()</code>，而非 Webpack 的<code>require()</code>，。是以現在的 <code>modules/index.js</code> 檔案需要看起來是這樣的：

正如 Webpack 文檔中所說：”這個特性内部依賴 Promise。如果你在舊版本浏覽器使用<code>import()</code>，記得使用一個 polyfill 來相容 Promise，比如 es6-promise 或者 promise-polyfill“。

是的，然後你就可以在 Blendid 開箱即用的模式觸發子產品生成對應特定的 JS。

還不,但至少可以引領你開始以合理的方式管理 HTTP/2 資源。随着我們對如何拆分代碼來更好地使用 HTTP/2 的思考，我真切地希望這個配置将會越來越完善。

<b>原文釋出時間為：2017年9月15日</b>

<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>