个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我目前正在使用 React 中的 SSR 连接一个应用程序。然而，我服务器有问题不在 Brotli 中返回响应压缩文件格式。我确实看到我的 br 文件正在生成通过我的客户端 webpack 配置文件中的 webpack。但是我的服务器没有接受将 br 文件返回给我的客户。仅供引用....我也有我的客户端的 webpack 也会生成 gz 文件。我试图以 br 模式返回的文件是 client_bundle.js 文件和 app.css。
正如您将在我的 server.js 文件中看到的那样，我发回了一个以 HTML 字符串格式响应。我试过更改我的链接和脚本标签返回 app.css.br 和 client_bundle.js.br 但无济于事。
你知道我可能做错了什么以及为什么我的服务器不返回吗和/或客户端不会选择 CSS 和 JS 的 br 文件？
仅供引用....我在我的 server.js 文件中使用 nodejs，express-static-zip。在另外，我正在使用 compression-webpack-plugin 和 brotli-webpack-plugin为 app.css 和 client_bundle.js 生成 br 和 gz 文件。其他旁注，我正在将我的客户端文件构建到 build/public 和我的服务器中文件构建。
感谢您的帮助。
webpack.client.js
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require("webpack");
const autoprefixer = require("autoprefixer");
const CompressionPlugin = require("compression-webpack-plugin");
const BrotliPlugin = require("brotli-webpack-plugin");
module.exports = {
mode:"development",
optimization: {
usedExports: true
},
entry: "./src/client/client.js",
output: {
filename: "client_bundle.js",
path: path.resolve(__dirname, "build/public/"),
publicPath: "/build/public/"
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: "/node_modules"
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader", "sass-loader"]
})
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: "file-loader",
options: {
}
}
]
}
]
},
plugins: [
new ExtractTextPlugin({
filename: "app.css"
}),
new CompressionPlugin({
filename: '[path].gz[query]'
}),
new BrotliPlugin({
asset: '[path].br[query]',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8
})
]
};服务器.js
import express from "express";
import cors from "cors";
import React from "react";
import { renderToString } from "react-dom/server";
import { Provider } from "react-redux";
import { StaticRouter, matchPath } from "react-router-dom";
import serialize from "serialize-javascript";
import routes from "../shared/routes";
import configureStore from "../shared/configureStore";
import App from "../shared/app";
import "source-map-support/register";
import http from "http";
import reload from "reload";
import expressStaticGzip from "express-static-gzip";
const app = express();
const PORT = process.env.PORT || 3000;
app.use(cors());
app.use("/build/public", expressStaticGzip('/build/public', {
enableBrotli: true,
orderPreference: ['br', 'gz'],
setHeaders: function (res, path) {
res.setHeader("Cache-Control", "public, max-age=31536000");
}
}));
app.use(express.static("build/public"));
var server = http.createServer(app);
reload(app);
acc.push(Promise.resolve(store.dispatch(route.component.initialData())));
}
return acc;
}, []);
const currentRoute = routes.find(route => matchPath(req.url, route));
const requestInitialData =
currentRoute.component.initialData && currentRoute.component.initialData();
Promise.all(promises)
.then(() => {
const context = {};
const markup = renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
</Provider>
);
const initialData = store.getState();
res.send(`
<!DOCTYPE html>
<html>
<head>
<basehref="/">
<title>Sample</title>
<link rel="stylesheet" href="app.css.br">
</head>
<body>
<div id="root">${markup}</div>
<script src="client_bundle.js.br"></script>
<script src="/reload/reload.js"></script>
<script>window.__initialData__ = ${serialize(initialData)}</script>
</body>
</html>
`);
})
.catch(next);
});
app.listen(PORT, () => {
console.log("App running,", PORT);
});最佳答案
您正在压缩 Br 和 Gzip 中的客户端文件，这看起来是正确的，因为您的应用程序从 build/public 为它们提供服务。
但是服务器端渲染(其响应是 HTML 页面)从外观上看并没有使用 Brotli 或 Gzip 进行压缩。因此，浏览器会访问您的服务器，它会以未压缩的 HTML 响应进行响应，然后在 React 进行水合作用之前下载 Brotli 压缩文件。
关于javascript - 使用服务器端渲染 (SSR) 的 React 应用程序中的 Brotli，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54730009/
26
4
0
我在使用 Jade 和 express 时遇到了一些问题。这是 serder 端: router.get('/login', function (req, res) { res.status(2
是否可以使用 JavaScript 服务器端，从而在某些核心计算中不会显示在页面源代码中？ 我正在开发一款游戏，代码的一个关键部分只需要在服务器端计算然后传回客户端。 我的整个游戏都是用 Javasc
我正在寻找有关如何使用 ExtJS 4 实现安全页面的信息。我所说的安全页面是指用户将使用 Siteminder (SSO) 登录我们的网站，因此我们将拥有用户的身份。然后我们将通过进行数据库/LDA
我的 Centos 7 服务器正在运行 apache 2.4.6，并且正在使用 mod_wsgi 提供 django webapp。我的问题是我无法从另一台计算机的浏览器访问服务器 url。我没有从
我们收到了客户的请求，要求我们基于 ExtJS 框架构建 Web 应用程序。我查看了互联网，发现 ExtJs 只是一个客户端 javascript 控件，但我认为 Web 应用程序也必须具有服务器端
我有三个组件。 组件一包含组件二和三。 组件二是一个列表。 组件三用于向数据库添加项目。 当我将一个项目保存到数据库时，我想更新组件二中的列表。 我怎么做？ 最佳答案 设想 让我们假设:
欢迎， 我正在寻找能使我以尽可能高的格式下载youtube视频的youtube api。 几年前，这项工作更为简单，因为url拥有关于质量的信息，例如“fmt = 22”或“fmt = 6”，我们现在
我想将电子邮件 x@x.com 的用户密码设置为“an”。但代码不起作用。这是我的云代码: Parse.Cloud.define('testSetPasswordForUser', functio
正在阅读http://cocoawithlove.com/2010/03/streaming-mp3aac-audio-again.html这篇文章，想知道如何在服务器端实现它，是否像将文件放在htd
我有一个使用一些 css/javascript 选项卡的 php 脚本，它们在我的本地服务器上运行，但当我上传到我的在线服务器时则不起作用。 只是想知道是否有人知道为什么会出现这种情况？所有路径都
是否可以从 JavaScript 脚本获取服务器端页面的源代码？我希望能够获取服务器上同一文件夹中的页面的源代码。除了javascript之外，是否可以不使用任何其他东西？ 最佳答案 如果您想从 ja
.NET 4.0 我正在寻找在我们的服务器上生成Word文档的最简单方法。 局限性: 服务器端 我不想在服务器上安装word 数据源是XML 我试图用XSLT生成快速简单的DOCX，但是我可以找到的用
我正在使用 native jQuery 验证库来验证在联系表单中输入的电子邮件地址。由于这是一个表达式引擎站点，因此我使用其电子邮件验证器作为服务器端备份。 当我输入 test@b.c 时，jQuer
我使用带有服务器端处理的数据表来显示数万行。我需要通过复选框过滤这些数据。我能够制作一个工作正常的复选框，但我不知道如何添加多个复选框以协同工作。我找到了 similar solution在这里，但我
我正在尝试编写一个消息传递应用程序，并且我能够发送消息(显示为服务器客户端正确显示消息)但随后将我的客户端踢出服务器。服务器打印以下错误: java.io.EOFException at java.i
如果设备是移动设备，如何防止侧边栏加载服务器端资源？我了解如何通过 CSS 隐藏，但我更感兴趣的是防止对服务器的调用。 最佳答案 WordPress有一个名为wp_is_mobile()的函数它将检查
我有一个返回 text/event-stream 数据的网址，因此我尝试连接并打印我找到的所有内容: var url = "..." var source = new EventSource(url)
我得到这样的错误列表:{ error: [ "Email is required", "First Name is required"] } 我需要如何修改它，以获取包含字段名称的列表？ public
我正在尝试使用 ASIFormDataRequest 将数据发送到 ASP.net 服务器端。我创建了一个aspx页面。目前我可以得到这两个纯文本。但是我不知道如何通过 Request.Form 在
我在 ${host}/api/graphql 有一个可通过 POST 访问的快速 graphql 端点。 在那条路线上，我有身份验证中间件，如果用户未登录，我想重定向到登录页面。 看起来有点像这样。
我是一名优秀的程序员,十分优秀！