在 Vue 專案中，靜態資原始檔有二個位置可以存放，分別為 src 裡面的 assets 資料夾和外層的 static 資料夾，從資料夾名字上面就可以大概的看出有何區別。

• assets ：資產，資源
• static ：靜態的

同樣都是放資源的位置，為什麼會有二個地方，他們之間有什麼區別呢？
在我原來的專案裡面，我都是把各種資原始檔放到 assets 裡面，這樣在打包的時候 webpack 會自動把資源給你壓縮，比如把 png 圖片壓縮成 base64 格式，當時覺得這樣好啊，自動壓縮資源，減小專案體積，好東西。

然而在今天，我的這個做法被人實力打臉了，，，
最近入職了新公司，這二天在檢視新公司專案程式碼，發現他們的各種資原始檔都是放在 static 下面的，我就去問了，為什麼不把資源放在 assets 裡面，人家告訴我的理由如下：

將資源放到 static 裡面是為了快取的需要，放在 static 裡面的檔案，瀏覽器會自動為其設定快取邏輯，在初次請求獲取到資源以後，後續再請求相同的資源就會按照瀏覽器的預設快取策略來處理，比如說如果資源沒有更新，那麼就會返回 304，瀏覽器會直接從快取裡面拿這個資源，減少了請求，這也算是專案的一個優化點。
如果是把資源放到 assets 裡面，雖然會被壓縮，但是每次請求的時候都會直接向伺服器獲取新的資原始檔，這其實是一個很大的資源浪費，所以在打包體積和重複請求數的權衡上面，我們選擇了後者。