寫在最前面

我的原創什么聲明變成什么鬼了……

前言

隨著前端三大框架的盛行，越來越多的前后端分離項目在服務器上跑了起來，隨之而來，開發者也慢慢發現了這種開發模式所帶來的弊端，其中之一就是首屏加載速度特別慢，因為雖然虛擬DOM 在更新視圖方便比傳統方式更加出色，但是首次加載靜態資源時，我們的瀏覽器就需要花費更久的時間來處理這些Js了。

起因

從建立創建虛擬 dom 到render成真實的dom結構，肯定比傳統方式肯定要慢一些。為此，加快首屏渲染速度，社區也推出了相應的服務端渲染方案，如基于 vue 的nuxt 和基于 react 的 next.js，并且有了一定的成效，可以說是開發層面目前能帶來改善首屏加載的最佳方案了。拋開開發層面，為了解決這個首屏渲染與應用加載問題，為什么我們不讓內存和帶寬都很吃緊的服務器解放出來，把我們的靜態資源丟在 OSS 上呢？今天我就來說一下這個解決方案的具體步驟。

什么是 OSS?

阿里云對象存儲是這樣介紹的

OSS,對象存儲。海量、安全、低成本、高可靠的云存儲服務，提供99.9999999999%的數據可靠性。使用RESTful API 可以在互聯網任何位置存儲和訪問，容量和處理能力彈性擴展，多種存儲類型供選擇全面優化存儲成本。
意思就是提供一個類似云盤的東西給你，而且訪問的速度很快，你可以在里面儲存你想要的任意文件和資源，同時提供了一套 API 給你，可以在項目的代碼里面使用。

目前市場上比較知名我大概知道這幾家 - 七牛云 - 騰訊云 - 阿里云 該選誰呢？他們價格不一致，提供的免費額度也不一致，具體選擇什么，還要看自己的需要，我這里選擇七牛云講解。 為什么選擇七牛云? 因為免費>..< 。 10G免費空間，10G免費流量，對于搭建自己的博客網站已經綽綽有余了。

七牛云對象存儲

本章內容是將如何使用對象存儲的API在前端項目如何使用，至于如何開通七牛云對象存儲這些基礎內容不在本章介紹范圍內，如有需要去此鏈接查看：

教你從零開始申請和配置七牛云免費OSS對象存儲（不能再詳細了）_架構師小跟班-CSDN博客_騰訊云oss免費 七牛云 阿里云oss?blog.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 U?pinxianhs.com

如果我的分享能給你帶來收獲的話，給我個反饋吧，感謝，共同進步吧。

總結

以上是生活随笔為你收集整理的nuxt解决首屏加载慢问题_一个 Node 脚本让你的前端项目加载速度飞起来的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。