时间戳

首页 > 解决方案 > 在 Heroku 上使用的 Create-React-App 优化

node.js - 在 Heroku 上使用的 Create-React-App 优化

问题描述

我正在为 Heroku 优化 React 应用程序寻求帮助。

  1. 我买了一个翻译 XD Design 来 React on Fiverr。
  2. Translator 使用 SCSS 和 Bootstrap 创建所有前端。
  3. 然后我在上面添加了一点 web3js，并根据自己的喜好重新设计了一些组件。
  4. 将我的应用部署到 Heroku。

一切都很好，但问题是应用程序的加载时间很长（性能低下）。Google Page Speed Insight 显示超过 16 秒的加载时间，这是巨大的。主要原因是缺乏文本压缩。现在，我已经安装了一些压缩方法，在构建应用程序时，我拥有所有的“br”和“gz”文件，但我认为它没有被加载到 Heroku，因为加载时间没有改变。我还在 server.js 中声明使用这些文件（遵循一些教程），但它没有影响任何东西。谁能指出一些有关如何优化它的资源？

//server.js
const express = require('express');
const compression = require('compression');
const favicon = require('express-favicon');
const path = require('path');
const expressStaticGzip = require('express-static-gzip');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.use(compression());
app.get('/ping', function (req, res) {
 return res.send('pong');
});
const buildPath = path.join(__dirname, '..', 'build');
app.use(
  '/',
  expressStaticGzip(buildPath, {
    enableBrotli: true,
    orderPreference: ['br', 'gz']
  })
);

// Fallback to index.html when something that doesn't exist is requested
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, '..', 'build', 'index.html'), err => {
    if (err) {
      res.status(500).send(err);
    }
  });
});
app.listen(port);

标签： node.jsreactjsexpressherokugzip

解决方案

推荐阅读