本文以幽默的口吻講述了作者如何使用Webpack和Vue大幅增加CSS文件大小的故事，並最終通過改進方法解決了這個問題。文章並非鼓勵增加頁面大小，而是以反諷的方式展現(xiàn)了在使用Bulma框架和Vue CLI過程中遇到的問題及解決方法。

免責(zé)聲明:本文帶有諷刺意味。作者並非認(rèn)為自己比讀者高明，也不認(rèn)為增加網(wǎng)頁大小是好事。

許多文章都教你如何減小頁面大小：優(yōu)化圖片、移除冗餘CSS規(guī)則等等。作者以沃爾瑪為例，指出其頁面大小的縮減。

JavaScript優(yōu)化建議：

?? 刪除舊的和重複的依賴? 將大型依賴替換為小型依賴? 檢查是否過度polyfill ? 清理A/B測試配置?? 代碼分割！

沃爾瑪在其網(wǎng)站上進行了此操作。 JS包縮小了69%。交互時間縮短了28%。

然而，鮮有文章教你如何增加頁面大小。作者嘗試尋找相關(guān)資料，卻只找到一篇關(guān)於增大字體大小的文章。

意外的“增重”

為什麼要增加頁面大小呢？這對於低帶寬用戶來說不是一件好事嗎？作者給出了一些看似合理的，實則略顯滑稽的理由：

1. 你擁有千兆帶寬，而且住在田納西州（暗示網(wǎng)絡(luò)條件優(yōu)越）。
2. 瀏覽器會緩存，你只需要下載一次網(wǎng)站。
3. 你不在乎是否有人訪問你的網(wǎng)站，因為你“工作是為了生活，而不是為了工作而生活”。

如果你認(rèn)同這些理由，作者將展示如何將CSS大小增加1500%——只需一個簡單的Webpack技巧。

奇妙的技巧

作者在將項目重構(gòu)到Bulma CSS框架時發(fā)現(xiàn)了這個問題。最初的代碼混亂不堪，Sass代碼如同“囤積者”節(jié)目中的場景。

Bulma包含模態(tài)框等功能，作者之前使用的是第三方Vue組件。它還有一個漢堡菜單，因為這是眾所周知的成功網(wǎng)站必備元素。

重構(gòu)完成後，作者發(fā)現(xiàn)CSS大小顯著增加。最初的手工編寫代碼只有30KB（gzip壓縮後），重構(gòu)後達(dá)到了260KB。 Vue CLI也對此發(fā)出了警告，但作者忽略了。

作者將項目部署到生產(chǎn)環(huán)境，並在Twitter上宣布了這一“成就”。 Bulma的創(chuàng)建者Jeremy Thomas對此做出了回應(yīng)，指出CSS大小增加是因為存在大量重複樣式。

問題所在

作者承認(rèn)自己對CSS和Sass了解不多。在使用Vue CLI項目時，作者創(chuàng)建了一個src/styles文件夾，並在其中放置了一個bulma-but-not-all-of-bulma-only-some-of-it.scss文件，該文件導(dǎo)入部分Bulma組件。然後，將該文件導(dǎo)入到自定義Sass文件site.scss中。

為了在每個組件中使用這些樣式，作者使用了Sarah Drasner的一篇博客文章中的方法，通過修改vue.config.js文件來修改Webpack構(gòu)建過程。

作者沒有理解的是，這種方法會將Sass導(dǎo)入到每個Vue組件中。這導(dǎo)致了大量重複樣式，因為Vue會為每個組件添加data-v-屬性。

Vue如何處理scoped

Vue允許將樣式作用域限制在組件內(nèi)，通過動態(tài)插入data-屬性實現(xiàn)。如果在組件中導(dǎo)入包含樣式的Sass文件，Vue（通過Webpack）會將這些樣式與動態(tài)data-屬性一起命名空間化。

變量共享問題

你無法在一個組件中定義Sass變量，並在另一個組件中引用它。

使用Bulma和Vue的最佳實踐

為了解決這個問題，作者建議使用三個文件： variables.scss （導(dǎo)入Bulma變量）、 bulma-custom.scss （導(dǎo)入Bulma組件）和site.scss （定義全局樣式）。將site.scss導(dǎo)入到main.js文件中，並將variables.scss添加到vue.config.js文件中。

這樣，Bulma就全局可用，並且可以在每個組件中訪問所有Bulma變量。 CSS大小最終顯著減小。

改進後的方案

作者還提交了一個PR到Bulma文檔，介紹瞭如何在Vue CLI項目中自定義Bulma。

以上是WebPack和Vue如何將頁面大小提高1,500％的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！