nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，使用nuxt.js在做同构项目开发时，需要考虑的一些点总结如下：
一、node服务端性能优化（提高node应用程序处理高流量的能力）
基于nuxt.js的服务端渲染项目我们能做的服务端性能优化有以下几点（需要注意的是持久化缓存不应该在本地开发环境去做，这样在缓存期间不会暴露本地开发中代码的问题）
优化点
参考文档及思路
优化场景/条件
特别说明
检测方法
1. 页面缓存
页面内容不是用户特定（即对于相同的 URL，总是为所有用户渲染相同的内容）
一般来说，一个页面在服务端做了持久化缓存，那么对应页面的存在的api缓存，组件缓存也就没有意义了，对于页面缓存与api缓存同时存在的情况下（有可能存在），api缓存的时间应该比页面缓存的时间小，这样是为了让api响应的内容保持最新
1、代码本地测试：在asyncData中打印测试日志，页面缓存后，刷新页面后服务端不会输出测试日志；2、比较html页面加载的DOMContentLoaded时间，刷新页面可以看到缓存后的值比首次页面加载(未缓存)的值要小
2. api缓存
在axios请求与响应拦截器中去做
接口响应内容不是用户特定（即对于相同的api接口URL，即总是为所有用户响应相同的内容)
一般请求方式为GET的api请求
比较首次请求与缓存后的api接口响应的时间
3. 组件缓存
nuxtjs官网文档
不依赖与全局状态，对渲染上下文不产生副作用的子组件
要缓存的组件name值必须唯一，serverCacheKey根据某个prop的值作为唯一key
检测方法同页面缓存检测方法一致，这个可能几乎察觉不到
4. asyncData函数优化
Promise.all
该函数中请求api接口数超过1个，多的甚至达到10,20多个，这种情况我们不能使用async await，请求完一个再接着请求下一个(同步请求接口)；如果有10个接口需要请求，每个接口平均响应1s，那么至少需要10s才会响应html页面；如果使用Promise.all异步请求10个接口，那么最快接近1s响应html页面；
asyncData函数会在服务端执行代码，因此一定要做好容错处理；另外如果该函数代码一直未执行完，那么页面首次响应将会被挂起，一直处于加载中
对于页面首次加载，该函数执行耗时越短，页面响应时间就越短(页面加载越快)
1、页面缓存功能模块实现
我们在项目根目录中创建一个文件 ~/serverMiddleware/page-cache.js
import LRUCache from 'lru-cache' const cache = new LRUCache({ maxAge: 1000 * 60 * 2, // 有效期2分钟 max: 1000 // 最大缓存数量 }) export default function(req, res, next) { // 本地开发环境不做页面缓存 if (process.env.NODE_ENV !== 'development') { try { const cacheKey = req.url const cacheData = cache.get(cacheKey) if (cacheData) { return res.end(cacheData, 'utf8') } const originalEnd = res.end res.end = function(data) { cache.set(cacheKey, data) originalEnd.call(res, ...arguments) } } catch(error) { // console.log(`page-cache-middleware: ${error}`) next() } } next() }
2、api缓存功能模块实现
我们在项目根目录中分别创建两个文件 ~/plugins/axios/createCacheKey.js 与 ~/plugins/axios/cache.js ；特别坑的一点是nuxt.js开发环境cache.js插件代码在页面刷新，路由切换都相当于首次运行，因此你会发现缓存功能失效，只有在 process.env.NODE_ENV === 'production' 生产环境中测试有效
// ～/plugins/axios/createCacheKey.js import md5 from 'md5' /** * 根据请求配置，是否是请求拦截器 创建缓存key * @param {Object} config * @param {Boolean} isRequest */ export default function createCacheKey( config = {}, isRequest = false ) { const { url, data, params, method, baseURL, } = config || {} let commonUrl = url /** * request拦截器中config.url是未拼接baseURL的，response拦截器中response.config.url是拼接过baseURL的， * 为了保持统一，使用统一拼接baseURL的commonUrl；注意下面的if条件判断 */ if (isRequest && !commonUrl.match(baseURL) && !commonUrl.match(/^https?/)) { commonUrl = !!baseURL.match(/.+\/$/) ? `${baseURL.replace(/\/$/, '')}${url}` : `${baseURL}${url}` } // 根据请求指令，url，body体，参数生成规则 const rule = `method=${method}-url=${commonUrl}-data=${JSON.stringify(data || {})}-params=${JSON.stringify(params || {})}` // md5加密 return md5(rule) }
// ～/plugins/axios/cache.js