WebPack和Vue如何將頁面大小提高1,500％

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

免責聲明:本文帶有諷刺意味。作者並非認為自己比讀者高明，也不認為增加網頁大小是好事。

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

JavaScript優化建議：

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

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

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

意外的“增重”

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

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

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

奇妙的技巧

作者在將項目重構到Bulma CSS框架時發現了這個問題。最初的代碼混亂不堪，Sass代碼如同“囤積者”節目中的場景。

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

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

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

問題所在

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

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

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

Vue如何處理scoped

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

變量共享問題

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

使用Bulma和Vue的最佳實踐

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

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

改進後的方案

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

以上是WebPack和Vue如何將頁面大小提高1,500％的詳細內容。更多資訊請關注PHP中文網其他相關文章！