Vue服务端渲染和Vue浏览器端渲染的性能对比(实例

npm install -g vue-cli
vue init webpack doubanMovie
cd doubanMovie
npm install
npm run dev

import Vue from 'vue'
import Router from 'vue-router'
import Moving from '@/components/moving'
import Upcoming from '@/components/upcoming'
import Top250 from '@/components/top250'
import MoviesDetail from '@/components/common/moviesDetail'
import Search from '@/components/searchList'
Vue.use(Router)
/**
 * 路由信息配置
 */
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Moving',
 component: Moving
 },
 {
 path: '/upcoming',
 name: 'upcoming',
 component: Upcoming
 },
 {
 path: '/top250',
 name: 'Top250',
 component: Top250
 },
 {
 path: '/search',
 name: 'Search',
 component: Search
 },
 {
 path: '/moviesDetail',
 name: 'moviesDetail',
 component: MoviesDetail
 }
 ]
})

<keep-alive exclude="moviesDetail">
 <router-view></router-view>
</keep-alive>

├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
 ├── index.js  # 我们组装模块并导出 store 的地方
 └── moving  # 电影模块
 ├── index.js # 模块内组装，并导出模块的地方
 ├── actions.js # 模块基本 action
 ├── getters.js # 模块级别 getters
 ├── mutations.js # 模块级别 mutations
 └── types.js # 模块级别 types

import store from './store'
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

proxyTable: {
 '/api': {
 target: 'http://api.douban.com/v2',
 changeOrigin: true,
 pathRewrite: {
  '^/api': ''
 }
 }
 }

const port = process.env.PORT || 8080
app.listen(port, () => {
 console.log(`server started at localhost:${port}`)
})

app.get('*', (req, res) => {
 if (!renderer) {
 return res.end('waiting for compilation... refresh in a moment.')
 }
 const s = Date.now()
 res.setHeader("Content-Type", "text/html")
 res.setHeader("Server", serverInfo)
 const errorHandler = err => {
 if (err && err.code === 404) {
 res.status(404).end('404 | Page Not Found')
 } else {
 // Render Error Page or Redirect
 res.status(500).end('500 | Internal Server Error')
 console.error(`error during render : ${req.url}`)
 console.error(err)
 }
 }
 renderer.renderToStream({ url: req.url })
 .on('error', errorHandler)
 .on('end', () => console.log(`whole request: ${Date.now() - s}ms`))
 .pipe(res)
})

const proxy = require('http-proxy-middleware');//引入代理中间件
/**
 * proxy middleware options
 * 代理跨域配置
 * @type {{target: string, changeOrigin: boolean, pathRewrite: {^/api: string}}}
 */
var options = {
 target: 'http://api.douban.com/v2', // target host
 changeOrigin: true,  // needed for virtual hosted sites
 pathRewrite: {
 '^/api': ''
 }
};
var exampleProxy = proxy(options);
app.use('/api', exampleProxy);

import 'es6-promise/auto'
import { app, store, router } from './app'
// prime the store with server-initialized state.
// the state is determined during SSR and inlined in the page markup.
if (window.__INITIAL_STATE__) {
 store.replaceState(window.__INITIAL_STATE__)
}
/**
 * 异步组件
 */
router.onReady(() => {
 // 开始挂载到dom上
 app.$mount('#app')
})
// service worker
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 navigator.serviceWorker.register('/service-worker.js')
}

import { app, router, store } from './app'
const isDev = process.env.NODE_ENV !== 'production'
// This exported function will be called by `bundleRenderer`.
// This is where we perform data-prefetching to determine the
// state of our application before actually rendering it.
// Since data fetching is async, this function is expected to
// return a Promise that resolves to the app instance.
export default context => {
 const s = isDev && Date.now()
 return new Promise((resolve, reject) => {
 // set router's location
 router.push(context.url)
 // wait until router has resolved possible async hooks
 router.onReady(() => {
 const matchedComponents = router.getMatchedComponents()
 // no matched routes
 if (!matchedComponents.length) {
 reject({ code: 404 })
 }
 // Call preFetch hooks on components matched by the route.
 // A preFetch hook dispatches a store action and returns a Promise,
 // which is resolved when the action is complete and store state has been
 // updated.
 Promise.all(matchedComponents.map(component => {
 return component.preFetch && component.preFetch(store)
 })).then(() => {
 isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
 // After all preFetch hooks are resolved, our store is now
 // filled with the state needed to render the app.
 // Expose the state on the render context, and let the request handler
 // inline the state in the HTML response. This allows the client-side
 // store to pick-up the server-side state without having to duplicate
 // the initial data fetching on the client.
 context.state = store.state
 resolve(app)
 }).catch(reject)
 })
 })
}

context.state = store.state

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import { sync } from 'vuex-router-sync'
import Element from 'element-ui'
Vue.use(Element)
// sync the router with the vuex store.
// this registers `store.state.route`
sync(store, router)
/**
 * 创建vue实例
 * 在这里注入 router store 到所有的子组件
 * 这样就可以在任何地方使用 `this.$router` and `this.$store`
 * @type {Vue$2}
 */
const app = new Vue({
 router,
 store,
 render: h => h(App)
})
/**
 * 导出 router and store.
 * 在这里不需要挂载到app上。这里和浏览器渲染不一样
 */
export { app, router, store }