多页面服务端渲染问题

[LikeDege]

每个独立的页面都需要创建一个VueSSR实例，是不是会出现内存占用过高的问题？即每个页面都需要写一个render，并且在服务启动就创建。

[Awe]

@LikeDege 对于一个入口应用是一个 renderer，比如当前 template 例子中 home article tag 都是使用的 indexRenderer，对于你的说的场景 独立的页面都需要创建一个VueSSR实例 ，独立单页面可能不是适合调用 vue 服务端渲染而应该使用 nodejs 模板引擎。

/server/routers/router.js

router.get('/', View.index)
router.get('/home', View.index)
router.get('/article', View.index)
router.get('/tag', View.index)

/server/routers/view.js

const pug = require('pug')
const path = require('path')

const VueSSR = require('vue-ssr')
const serverConfig = require('../../build/webpack.server')

const indexRenderer = new VueSSR({
    projectName: 'index', 
    rendererOptions: {
        cache: require('lru-cache')({
            max: 10240,
            maxAge: 1000 * 60 * 15
        })
    }, 
    webpackServer: serverConfig
})

function render (view, data) {
    return pug.compileFile(path.join(__dirname, '../views/' + view + '.pug'), {
        cache: true
    })(data)
}

function index (req, res) {
    const template = render('index', { title: 'cov-x', bundle: 'index' })
    indexRenderer.render(req, res, template)
}

module.exports = {
    index
}

[LikeDege]

@hilongjw 难道我只能改成spa模式了？下面还有个问题请教下

如果把创建VueSSR实例的代码(indexRenderer)放到index函数下(我采取的方法)，即访问才创建

function index (req, res) {
    const indexRenderer = new VueSSR({
        projectName: 'index',
        rendererOptions: {
            cache: require('lru-cache')({
                max: 10240,
                maxAge: 1000 * 60 * 15
            })
        },
        webpackServer: serverConfig
    })
    const template = render('index', { title: 'cov-x', bundle: 'index' })
    indexRenderer.render(req, res, template)
}

开发模式下在webpack升级到2.1.0-beta.22以后的版本，会报错

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property '__vueOptions__'. These properties are valid:
  object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
   Loaders should be updated to allow passing options via loader options in module.rules.
   Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
   plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           __vueOptions__: ...
         }
       })
   ]

不知道和放在外面有什么不同？能否解答下？谢谢。

[Awe]

@LikeDege 将 indexRenderer 的创建仿真index就是给每次处理请求的重新初始化一个新的渲染器，初始化的也是有一定开销的，所以建议是用在外部初始化，对于每次请求只用调用初始化好的实例的render 方法就可以了。目前我在项目中是用的 webpack 是 2.1.0-beta.25

[Awe]

@LikeDege 对于想了解初始化 VueSSR 实例做了哪些事情，可以在 vue-ssr 以及 vue-server-renderer 了解一下

[LikeDege]

@hilongjw 好的，感谢你的回答。