ssr с react и express и требует статистики.в JSON объяснение

Я смотрю на пример кода внизу, который является примером react ssr:

на configureProduction функция, она имеет эту строку:

const clientStats = require('./assets/stats.json');

что это статистика.файл json, который требуется?

import express from 'express';
import { join } from 'path';
import { log } from 'winston';

/**
 * Configures hot reloading and assets paths for local development environment.
 * Use the `npm start` command to start the local development server.
 *
 * @param app Express app
 */
const configureDevelopment = app => {
    const clientConfig = require('../webpack/client');
    const serverConfig = require('../webpack/server');
    const publicPath = clientConfig.output.publicPath;
    const outputPath = clientConfig.output.path;

    const multiCompiler = require('webpack')([clientConfig, serverConfig]);
    const clientCompiler = multiCompiler.compilers[0];

    app.use(require('webpack-dev-middleware')(multiCompiler, {publicPath}));
    app.use(require('webpack-hot-middleware')(clientCompiler));

    app.use(publicPath, express.static(outputPath));

    app.use(require('webpack-hot-server-middleware')(multiCompiler, {
        serverRendererOptions: { outputPath }
    }));

    app.set('views', join(__dirname, '../public/views'));
};

/**
 * Configures assets paths for production environment.
 * This environment is used in deployment and inside the docker container.
 * Use the `npm run build` command to create a production build.
 *
 * @param app Express app
 */
const configureProduction = app => {
    const clientStats = require('./assets/stats.json');
    const serverRender = require('./assets/app.server.js').default;
    const publicPath = '/';
    const outputPath = join(__dirname, 'assets');

    app.use(publicPath, express.static(outputPath));
    app.use(serverRender({
        clientStats,
        outputPath
    }));

    app.set('views', join(__dirname, 'views'));
};

const app = express();

log('info', `Configuring server for environment: ${process.env.NODE_ENV}...`);
if (process.env.NODE_ENV === 'development') {
    configureDevelopment(app);
} else {
    configureProduction(app);
}

log('info', 'Configuring server engine...');
app.set('view engine', 'ejs');
app.set('port', process.env.PORT || 3000);

app.listen(app.get('port'), () => log('info', `Server listening on port ${app.get('port')}...`));

3 ответов


это, скорее всего, файл, сгенерированный плагином webpack (https://github.com/danethurber/webpack-manifest-plugin) после создания клиентского пакета это имя файла хэшируется и необходимо серверу, чтобы он знал, как отобразить базовый шаблон, который затем загрузит клиент.

конечно, это предположение, так как у нас нет доступа к вашему , webpack настройки или package.json..

этот репозиторий использует аналогичный подход: https://github.com/CheesecakeLabs/react-redux-boilerplate/ Он создает клиент, генерирует такой же файл, а затем создает пакет сервера, используя этот файл JSON в качестве информационной точки, чтобы понять, как называется пакет клиента.

файл JSON должен быть похож на это:

{
  "apple-touch-icon.png": "114dec1694406188ff0cb2698607cbca.png",
  "production.css": "production.fbee6dc76218b122f7ff.css",
  "production.css.map": "production.fbee6dc76218b122f7ff.css.map",
  "production.js": "production.fbee6dc76218b122f7ff.js",
  "production.js.map": "production.fbee6dc76218b122f7ff.js.map",
  "safari-pinned-tab.svg": "f157afc1cf258044878dab6647d2800b.svg"
}

на созданный webpack-stats-plugin и может использоваться процессом узла для "определите правильный путь пакета на вашем сервере": https://github.com/FormidableLabs/webpack-stats-plugin


проект вы ищете на ниже

https://github.com/rherwig/template-react-16-ssr/blob/master/src/index.js

если вы посмотрите на