vue サーバー側レンダリングキャッシュアプリケーションのサンプルコード-jsチュートリアル-php.cn

vue サーバー側レンダリングキャッシュアプリケーションのサンプルコード

不言

リリース： 2018-09-12 15:23:21

オリジナル

1369 人が閲覧しました

この記事の内容は、Vue サーバー側レンダリングキャッシュアプリケーションのサンプルコードです。必要な方は参考にしていただければ幸いです。

Vueキャッシュはページキャッシュ、アセンブリキャッシュ、インターフェースキャッシュに分かれています

ページキャッシュ:

server.jsで設定

アセンブリキャッシュ:

const LRU = require(&#39;lru-cache&#39;)

ログイン後にコピー

const microCache = LRU({
  max: 100, // 最大缓存的数目
  maxAge: 1000 // 重要提示：条目在 1 秒后过期。
})
 
const isCacheable = req => {
  //判断是否需要页面缓存<br>　　if (req.url 
&& req.url === &#39;/&#39;) {<br> 　　 return req.url<br>　　} 
else {<br><em id="__mceDel"><em id="__mceDel"> 
　　return false<br></em></em><em 
id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em 
id="__mceDel"><em 
id="__mceDel">　　}<br></em></em></em></em></em><em
 id="__mceDel">}</em>

ログイン後にコピー

キャッシュ済み

app.get(&#39;*&#39;, (req, res) => {
const cacheable = isCacheable(req)
　　if (cacheable) {
　　　　const hit = microCache.get(req.url) 　　　　
　　　　if (hit) { 
　　　　   　　return res.end(hit)　　
　　　　   　　}　
      }

ログイン後にコピー

serverCacheKey の構築によって返されるキーには、レンダリング結果の特定の状況を表すのに十分な情報が含まれている必要があります。レンダリング結果が props.item.id によってのみ決定される場合、上記は適切な実装です。ただし、同じ ID を持つアイテムが時間の経過とともに変化する可能性がある場合、またはレンダリング結果が他のプロパティに依存する場合は、他の変数を考慮して serverCacheKey の実装を変更する必要があります。 serverCacheKey が定数を返す場合、コンポーネントは常にキャッシュされるため、純粋に静的なコンポーネントに適しています。