寫在最前面
我的原創什麼聲明變成什麼鬼了……
前言
随着前端三大架構的盛行，越來越多的前後端分離項目在伺服器上跑了起來，随之而來，開發者也慢慢發現了這種開發模式所帶來的弊端，其中之一就是首屏加載速度特别慢，因為雖然虛拟DOM 在更新視圖友善比傳統方式更加出色，但是首次加載靜态資源時，我們的浏覽器就需要花費更久的時間來處理這些Js了。
起因
從建立建立虛拟 dom 到render成真實的dom結構，肯定比傳統方式肯定要慢一些。為此，加快首屏渲染速度，社群也推出了相應的服務端渲染方案，如基于 vue 的nuxt 和基于 react 的 next.js，并且有了一定的成效，可以說是開發層面目前能帶來改善首屏加載的最佳方案了。抛開開發層面，為了解決這個首屏渲染與應用加載問題，為什麼我們不讓記憶體和帶寬都很吃緊的伺服器解放出來，把我們的靜态資源丢在 OSS 上呢？今天我就來說一下這個解決方案的具體步驟。
什麼是 OSS?
阿裡雲對象存儲是這樣介紹的
OSS,對象存儲。海量、安全、低成本、高可靠的雲存儲服務，提供99.9999999999%的資料可靠性。使用RESTful API 可以在網際網路任何位置存儲和通路，容量和處理能力彈性擴充，多種存儲類型供選擇全面優化存儲成本。
意思就是提供一個類似雲盤的東西給你，而且通路的速度很快，你可以在裡面儲存你想要的任意檔案和資源，同時提供了一套 API 給你，可以在項目的代碼裡面使用。
目前市場上比較知名我大概知道這幾家 - 七牛雲 - 騰訊雲 - 阿裡雲 該選誰呢？他們價格不一緻，提供的免費額度也不一緻，具體選擇什麼，還要看自己的需要，我這裡選擇七牛雲講解。 為什麼選擇七牛雲?
因為免費>..<。 10G免費空間，10G免費流量，對于搭建自己的部落格網站已經綽綽有餘了。
七牛雲對象存儲
本章内容是将如何使用對象存儲的API在前端項目如何使用，至于如何開通七牛雲對象存儲這些基礎内容不在本章介紹範圍内，如有需要去此連結檢視：
教你從零開始申請和配置七牛雲免費OSS對象存儲（不能再詳細了）_架構師小跟班-CSDN部落格_騰訊雲oss免費 七牛雲 阿裡雲ossblog.csdn.net
開通好了，我們就拿到了一些關鍵的資訊，如AccessKey、SecretKey、存儲空間名、通路位址、存儲區域。 有了這些，我們再來看一下七牛雲對象存儲的提供
Node.js SDK_SDK_對象存儲 - 七牛開發者中心developer.qiniu.com
我們這裡主要是要用到檔案上傳功能，是以着重介紹上傳檔案的 API. 看一個最簡單粗暴的用例，上傳本地檔案到遠端，以表單方式
var
是以我們隻要逐漸周遊我們的需要上傳的檔案夾就好了。 直接給用例，看似很長，其實沒多少邏輯，就是周遊需要上傳的檔案夾。 以一個 Nuxt 項目為例，需要上傳的是用戶端的靜态資源，本地路徑為.nuxt/dist/client。 檔案結構如下：
是以，為了與打包的 publicpath 保持一緻，上傳路徑為 img 時，應該改為 img/+檔案名
const
使用 node 指令或者在每次build 之後上傳都可，看項目需要。
我這裡選擇每次 build 之後上傳。 對了，别忘了将你的打包資源路徑換成你的 OSS的域名。
那就配置好了，現在我們開始運作一下。
它開始上傳了! 我們來看一下加載速度。 大家自行體驗吧.
品賢畫室 | For Art,For Upinxianhs.com
如果我的分享能給你帶來收獲的話，給我個回報吧，感謝，共同進步吧。