如何高效的載入scss文件？

01-08

我正在學習Scss，看到了一篇文章Aesthetic Sass 1: Architecture and Style Organization
如果我有以下文件結構，

base/ – contains global styles, such as resets, typography, colors, etc.

components/ – contains each self-contained component in its own .scss partial

layout/ – contains styling for larger layout components; e.g. nav, header, footer, etc.

pages/ – contains page-specific styling, if necessary

themes/ – contains styling for different themes

utils/ – contains global mixins, functions, helper selectors, etc.

vendors/ – contains 3rd-party styles, mixins, etc.

main.scss – output file that brings together all of the above parts

main.scss包含了所有scss。
看帖子說，我可以只編譯main.scss成main.css，然後導入main.css到html頁面。
我的問題是
- 初始載入所有css是否合理？個人覺得最好是用的時候再載入比較好，否則載入會很慢。有沒有什麼改善的實際有效的方法？

CSS 載入會阻塞 HTML 渲染，如果 & 引入的 CSS 過大，對首屏展現時間會有較大影響。題主的問題很好，當然可以分模塊去輸出 CSS。分模塊、打包合併和緩存之間存在一個相互取捨的關係，可能需要實驗來選擇。另外，提前內聯首屏 CSS，把其他部分放入 & 可以有效加速首屏呈現。但首屏用到的 CSS 識別出來沒那麼容易，可以參考 Addy Osmani 的 https://github.com/addyosmani/critical/。

用到再載入那才叫慢。

請以實際測試為準不要猜測。

一般我們都會加上長期緩存。

我覺得只要在一定的程度上能保證css載入完，比如多少毫秒，那載入越多越好，然後才是按需載入。

根據經驗，多page的網站還是把css按頁面分開比較好，留一個公共css文件。

協商緩存