nuxt打包路勁問題_簡述Nuxt.js

Nuxt.js 是一個基于 Vue.js 的通用應用框架，一個用于Vue.js 開發SSR應用的一站式解決方案。它的優點是將原來幾個配置文件要完成的內容，都整合在了一個nuxt.config.js，封裝與擴展性完美的契合。

簡單說nuxtjs項目，它其實就是一個vue的項目融合一個node.js server項目，這里node服務有兩個作用，第一點是代替瀏覽器的工作,籠統理解就是在created時的請求數據和頁面渲染，第二點是當作靜態文件服務器，把渲染好的頁面返回給用戶。

ssr服務做緩存的意義

在上圖中，我們可以看到一個簡單的ssr服務渲染流程，在這里筆者把與前端渲染不同之處標紅，一個是初始化的數據。第二個是獲取數據后服務器對于頁面的渲染。

圖中如果未使用緩存，就會導致每一個用戶的對頁面的請求，都使用服務去渲染一次，這對于服務器簡直是災難。特別是渲染所依賴的node.js服務，不論是express還是koa又或者是像nuxt的封裝，都繞不開渲染時對于服務器cpu產生壓力。反之，使用緩存，用內存空間換取cpu的使用率這是劃算的，且屬于node.js的長項。

緩存的使用思路

nuxt緩存有三種，從小到大就是接口緩存、組件緩存、頁面緩存，下面我們找具體的場景來聊一下。

1.接口緩存，我們來看下下面這張圖。

這轉轉有書的首頁，你所能看到的都是從接口獲取的數據渲染的，往往首頁的數據的在一段時間內是不會變動的，也許是1小時、也許是幾天，我們每次都去服務端取數據，完全沒必要，所有接口做緩存，在這種場景非常有必要。即便是頁面數據經常變動，通過一次請求，使用緩存，代替用戶的n次請求對于api服務器來說會有很不錯的收益。

2.組件緩存

沒找到特別貼合的頁面，這里就畫圖了，如上圖，你的組件會在多個服務端渲染的頁面中出現，使用組件緩存是非常不錯的選擇。

再說一個極端都例子，例如一個頁面中是如上圖中的A、B組件的結構，A組件是長時間不會怎么變且大量使用，B組件需要展示用戶頭像和用戶的名字，每個B組件渲染出來都不一樣，且這個頁面還要放在服務端渲染，那么這樣的場景使用組件渲染是合適的。

上面這個極端的例子，千萬不要被誤導，因為B組件沒有可復用的地方，完全可以放在客戶端去渲染。

3.頁面緩存 頁面緩存的場景就是一個頁面長的一樣的部分，大量被用戶請求，那么就可以做頁面緩存，例如上面的首頁，在一段時間內，用戶看到的內容是不會變的。

這三種緩存是包含關系，也就觸發了大級別的緩存，就不會觸發小級別的緩存，簡單來說就是一個請求找到頁面緩存，肯定不需要再去請求接口了。

最后筆者選定是接口緩存與頁面緩存搭配使用，理由是我可以把那些類似于根據用戶不同而不同的推薦組件放到客戶端去獲取數據并渲染，也就是公共部分用服務端渲染，差異部分用客戶端渲染。這是對于我們現在的業務是最好的選擇。

緩存的實踐

筆者在里并沒有使用常規的lru-cache這個包做緩存，而是把接口與頁面的緩存都做在里redis里。先說怎么做，下面的思考部分我們再來聊筆者的理由。

下面是實現，先來說說接口緩存：1.如何接口獲取的數據存入redis 在nuxt.config.js中，我們在modules配置中加入@nuxtjs/axios，這是nuxtjs自帶的，然后編寫一個叫axios.server.js的文件，加入plugins配置中，這里的重點是文件命中一定要加server的標示，這樣nuxt在加載這個插件的時候只會把它加載到服務端去。

代碼如上圖，比較好理解就是onResponse監聽一下接口返回的數據存入redis，這是存緩存的部分。

axios獲取緩存的代碼如下。

注意點：這個一定要加上服務端的判斷，雖然打包的時候asyncData里的代碼不會被打包到客戶端，但是在打包和開發的時候不加上服務端的判斷，會報一些無法引包的錯誤。這里可以對axios進行封裝，但一定要注意服務端和客戶端。

2.頁面緩存存入redis 這里就比較簡單了，在nuxt.config.js中,serverMiddleware配置里加入一個中間件，代碼如下。

在上面的中間件中你需要自己處理下哪些是你需要緩存的，包括html、js、css。

問題

聊聊筆者為什么想用redis代替lru-catch的方案，理由是使用redis,使我會擔心內存膨脹太快帶來的問題，而且多臺負載的ssr服務可以共同使用一個緩存，我們甚至可以通過操作redis主動的去管理緩存，對于很多頁面、接口需要做緩存來說，這樣做是很不錯的。

這樣一來，我們的ssr服務通過做緩存解決里cpu使用率的問題，然后又通過使用redis解決了本地內存膨脹的問題，ssr服務變的更專心于io。

還有個問題就是緩存的生存時間，例如我們設置了一個很長的緩存的生存時間，接口的數據都變了，可是我們還在使用緩存，當然你可以選擇一個合適長短的過去時間，可以從redis里面把緩存刪掉，這也是我們用redis存儲緩存的好處。

還有就是要注意緩存級別的問題，大級別的緩存會覆蓋小級別的緩存，例如客戶端一直在走頁面的緩存，那么接口緩存怎么刷新也沒用，這就需要我們做一些緩存的關聯管理。思路如下圖。