React loadable SSR view plugin for egg
npm install egg-view-react-loadable[![NPM version][npm-image]][npm-url]
[![Continuous Integration][ci-image]][ci-url]
[![Test coverage][codecov-image]][codecov-url]
[![Known Vulnerabilities][snyk-image]][snyk-url]
[![npm download][download-image]][download-url]
[npm-image]: https://img.shields.io/npm/v/egg-view-react-loadable.svg?style=flat-square
[npm-url]: https://npmjs.org/package/egg-view-react-loadable
[ci-image]: https://github.com/bingdian/egg-view-react-loadable/workflows/CI/badge.svg?branch=master&event=push
[ci-url]: https://github.com/bingdian/egg-view-react-loadable/actions?query=branch%3Amaster
[codecov-image]: https://img.shields.io/codecov/c/github/bingdian/egg-view-react-loadable.svg?style=flat-square
[codecov-url]: https://codecov.io/github/bingdian/egg-view-react-loadable?branch=master
[snyk-image]: https://snyk.io/test/npm/egg-view-react-loadable/badge.svg?style=flat-square†
[snyk-url]: https://snyk.io/test/npm/egg-view-react-loadable
[download-image]: https://img.shields.io/npm/dm/egg-view-react-loadable.svg?style=flat-square
[download-url]: https://npmjs.org/package/egg-view-react-loadable
React loadable SSR view plugin for egg
- Code splitting
- Server Side Rendering
- Full dynamic import
see https://loadable-components.com/ for more detail.
``bash`
$ npm i egg-view-react-loadable --save
$ npm i egg-view-nunjucks --save
`js
// {app_root}/config/plugin.js
exports.nunjucks = {
enable: true,
package: 'egg-view-nunjucks',
};
exports.reactLoadable = {
enable: true,
package: 'egg-view-react-loadable',
};
`
`js
// {app_root}/config/config.default.js
exports.view = {
root: [
path.join(app.baseDir, 'app/view'),
path.join(app.baseDir, 'app/public/ssr'),
].join(','),
mapping: {
'.html': 'nunjucks',
'.js': 'reactLoadable',
},
};
exports.reactLoadable = {
nodeStatsFile: path.join(app.baseDir, 'app/public/ssr/loadable-stats.json'),
webStatsFile: path.join(app.baseDir, 'app/public/csr/loadable-stats.json'),
template: {
// template config for ctx.renderSSRctx.renderToStream
renderSSR: {
renderSSRTemplate: path.join(app.baseDir, 'app/view/renderSSRLayout.html'),
viewEngine: 'nunjucks',
},
// template config for `
renderToStream: {
renderToStreamStartTemplate: path.join(app.baseDir, 'app/view/renderToStreamStartTemplate.html'),
renderToStreamEndTemplate: path.join(app.baseDir, 'app/view/renderToStreamEndTemplate.html'),
viewEngine: 'nunjucks',
},
},
};
see config/config.default.js for more detail.
`html
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
${styleTags}
${content}
${initStateContent}
${scriptTags}