0

我制作 app.client.js 和 app.server.js 包,另外我执行代码拆分并创建 vendor.chunk.js 1.chunk.js(这个应该是我的组件包,它是根据请求上传的)。

当我查看它们时,它们都是不同的,但是当我通过 DevTools 查看它们时,每个包都像下面的屏幕所示:

在此处输入图像描述

这是我用来执行 res.send(~html~) 的 renderer.js 的一部分:

export default (req, res, next) => {
let context = {};
let modules = [];
const html = ReactDomServer.renderToString(
    <Capture report={moduleName => modules.push(moduleName)}>
        <Router context={context} location={req.url}>
            <App/>
        </Router>
    </Capture>
);

let bundles = getBundles(stats, modules);

return res.send(`
        <!doctype html>
        <html lang="en">
          <head>...</head>
          <body>
            <div id="app">${html}</div>
            <script src="../../../dist/vendor.chunk.js"></script>
            ${bundles.map(bundle => {
    return `<script src="${bundle.publicPath}"></script>`
}).join('\\n')}
            <script src="../../../dist/app.client.js"></script>
          </body>
        </html>
`);
}

你能解释一下为什么它坏了吗?谢谢!

UPD:如下设置我的 server/index.js 文件后...

const app = Express();
const Router = Express.Router();

Router.use(Express.static(
    'dist',
    { maxAge: '30d' }));
Router.use('*', serverRenderer);

app.use(Router);
preloadAll().then(() => {
    app.listen(PORT, (error) => {
        if (error) return console.log('ERROR', error.message);
        console.log('Server listening on ', PORT);
    });
});

...我还有另一个问题:1.chunk.js 和 1.chunk.js.map 以某种方式重复,并且 devtools 警告我错误“意外令牌:”。这是它现在的样子:

在此处输入图像描述

4

0 回答 0