webpack真的適合SPA么？

01-25

更新：寫了一個配置化自定義打包文件的插件。就解決了這個問題。可以通過配置文件自定義modules打包在哪些chunk下。

-------------

以下是自己的困惑，與思考。希望大家多多指點。

我的想法是：webpack不適合一個用戶頻繁訪問的頁面。

但是從SPA的特點來說，我們可以舉出兩個例子。

共同點：兩者頁面需要用到的js代碼都非常多。

不同點：兩者的打包方式不一樣。

facebook是展示型的頁面，用了bigpipe，所以小文件載入符合需要。teambition是工具型頁面，載入時有loading標誌，也無傷大雅。這裡並不是很嚴謹的對比性能，只是通過兩個頁面來代表兩種載入方式。

teambition

facebook

但是很明顯兩者的打包方式完全不同。

文件的初次載入速度

用戶第一次訪問頁面，teambition的首次載入速度肯定是比facebook快的。bundle的好處就在這裡，減少請求的時間，從而提升載入的速度。

facebook的就不太一樣了，肯定會慢一點，因為同時發出大量請求必然慢。

發布新版本以後的載入速度

但是如果非覆蓋式地發布了新版本，teambition的304，或是from cache緩存失效。哪怕只是修改了100KB的代碼量，用戶也需要重新載入650KB的js文件。

facebook則不一樣，修改了3個40KB的文件，瀏覽器也只是需要重新載入120KB的內容就好了。

結論

一個用戶如果是頻繁訪問該頁面，並且頁面經常迭代版本（我想互聯網大部分都是這樣），那麼發布新版本以後的載入速度就非常重要了。而webpack天然的就拒絕了這種載入模式。所以我認為SPA反而不應該用webpack。包括了阿里郵箱也是一個SPA，也不會所有內容都在一個js文件下面。