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

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

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

JavaScript優(yōu)化建議：

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

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

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

意外的“增重”

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

1. 你擁有千兆帶寬，而且住在田納西州（暗示網(wǎng)絡(luò)條件優(yōu)越）。
2. 瀏覽器會(huì)緩存，你只需要下載一次網(wǎng)站。
3. 你不在乎是否有人訪問你的網(wǎng)站，因?yàn)槟恪肮ぷ魇菫榱松?，而不是為了工作而生活”?/li>

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

奇妙的技巧

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

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

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

作者將項(xiàng)目部署到生產(chǎn)環(huán)境，并在Twitter上宣布了這一“成就”。Bulma的創(chuàng)建者Jeremy Thomas對(duì)此做出了回應(yīng)，指出CSS大小增加是因?yàn)榇嬖诖罅恐貜?fù)樣式。

問題所在

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

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

作者沒有理解的是，這種方法會(huì)將Sass導(dǎo)入到每個(gè)Vue組件中。這導(dǎo)致了大量重復(fù)樣式，因?yàn)閂ue會(huì)為每個(gè)組件添加data-v-屬性。

Vue如何處理scoped

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

變量共享問題

你無法在一個(gè)組件中定義Sass變量，并在另一個(gè)組件中引用它。

使用Bulma和Vue的最佳實(shí)踐

為了解決這個(gè)問題，作者建議使用三個(gè)文件：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就全局可用，并且可以在每個(gè)組件中訪問所有Bulma變量。CSS大小最終顯著減小。

改進(jìn)后的方案

作者還提交了一個(gè)PR到Bulma文檔，介紹了如何在Vue CLI項(xiàng)目中自定義Bulma。

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