预压缩的gzip压缩的文件无法通过快递送达可能是因为走错了路

Question

我有一个文件夹结构，这样的应用程序做出反应：

├── index.html 
└── app 
    ├── server.js 
    ├── routes.jsx 
    ├── scripts 
    │ ├── bundle.js 
    │ ├── bundle.js.gz 
    │ ├── vendor.js 
    │ └── vendor.js.gz 
    └── components 
     └── ... 

我要为预压缩文件（* .js.gz）时的.js请求的文件，但原来的.js文件被提供，而不是。这可能是因为错误的道路，但我无法弄清楚。

这里是我的server.js文件：

import React from 'react'; 
import ReactDOMServer from 'react-dom/server'; 
import { StaticRouter } from 'react-router'; 
import http from 'http'; 
import express from 'express'; 
import fs from 'fs'; 
import App from '~/routes.jsx'; 

const index = fs.readFileSync('index.html', 'utf8'); 
const PORT = process.env.PORT || 8000; 

const app = new express(); 
const server = new http.Server(app); 

app.use('/app', express.static('app')); 

app.use((request, response) => { 
    const context = {}; 

    const html = ReactDOMServer.renderToString(
     <StaticRouter location={request.url} context={context}> 
      <App/> 
     </StaticRouter> 
    ); 

    if (context.url) { 
     response.writeHead(301, {Location: context.url}); 
     response.end(); 
    } else { 
     response.write(index.replace(
      /<div id="root"><\/div>/, 
      `<div id="root">${html}</div>` 
     )); 
     response.end(); 
    } 
}); 

app.get('*.js', function (request, response, next) { 
    console.log('js requested'); 
    request.url = request.url + '.gz'; 
    response.set('Content-Encoding', 'gzip'); 
    next(); 
}); 

server.listen(PORT); 
console.log(`\nApplication available at localhost:${PORT}\n`); 

Answer 1

中间件在快递在您添加的顺序总是被调用。因此要加载*.js.gz文件，您需要将中间件移动到中间件上方。

//... 
//load this middleware first 
app.get('*.js', function (request, response, next) { 
    console.log('js requested'); 
    request.url = request.url + '.gz'; 
    response.set('Content-Encoding', 'gzip'); 
    next(); 
}); 
//then load the express.static middleware 
app.use('/app', express.static('app')); 
//...