這篇文章帶給大家的內容是關於vue服務端渲染頁面快取和元件快取的介紹(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
vue快取分為頁面快取、組成快取、介面緩存,這裡我主要說到了頁面快取和組成快取
頁面快取:
在server. js中設定
const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期。 }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url === '/') { return req.url } else { return false } } app.get('*', (req, res) => { const cacheable = isCacheable(req) if (cacheable) { const hit = microCache.get(req.url) if (hit) { return res.end(hit) } } const errorHandler = err => { if (err && err.code === 404) { // 未找到页面 res.status(404).sendfile('public/404.html'); } else { // 页面渲染错误 res.status(500).end('500 - Internal Server Error') console.error(`error during render : ${req.url}`) console.error(err) } } const context = { title: 'vue', keywords: 'vue-ssr服务端脚手架', description: 'vue-ssr-template, vue-server-renderer', version: v, url: req.url, cookies: req.cookies } renderer.renderToString(context, (err, html) => { if (err) { return errorHandler(err) } res.end(html) microCache.set(req.url, html) // 设置当前缓存页面的内容 }) })
組成快取:
在server.js中設定如下:
function createRenderer(bundle, template) { return require('vue-server-renderer').createBundleRenderer(bundle, { template, cache: LRU({ max: 1000, maxAge: 1000 * 60 * 5 // 组建缓存时间 }) }) } let renderer if (isProd) { // 生产环境使用本地打包文件来渲染 const bundle = require('./output/vue-ssr-bundle.json') const template = fs.readFileSync(resolve('./output/index.html'), 'utf-8') renderer = createRenderer(bundle, template) } else { // 开发环境使用webpack热更新服务 require('./build/dev-server')(app, (bundle, template) => { renderer = createRenderer(bundle, template) }) }
要快取的組成
export default { name: 'Home', title() { return { title: 'vue-ssr', keywords: 'vue-ssr服务端脚手架, home', description: 'vue-ssr-template, vue-server-renderer, home' } }, created() { }, computed: {}, asyncData({ store }) {}, methods: {}, serverCacheKey: props => props.id }
serverCacheKey 回傳的key 應該包含足夠的信息,來表示渲染結果的具體情況。如果渲染結果僅由 props.item.id 決定,則上述是一個很好的實作。但是,如果具有相同 id 的 item 可能會隨時間而變化,或者如果渲染結果依賴其他 prop,則需要修改 serverCacheKey 的實現,以考慮其他變數。如果 serverCacheKey傳回常數將導致元件始終被緩存,這對純靜態元件是有好處的。
以上是vue服務端渲染頁面快取和元件快取的介紹(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!