javascript 将标准import语句转换为React.lazy()以便代码拆分包时出现问题

ecr0jaav 于 2023-03-06 发布在 Java

关注(0)|答案(1)|浏览(123)

我想进行以下导入和代码：

import {HotTable} from '@handsontable/react';
import {registerAllModules} from 'handsontable/registry';
registerAllModules();

并将它们转换为使用React. lazy（），以便webpack为HandsOnTable库创建一个单独的bundle。
如果我这样做：

const HotTable = React.lazy(() => import('@handsontable/react'));
import {registerAllModules} from 'handsontable/registry';
registerAllModules();

代码仍将运行，但HandsOnTable仍在主包中。
如果我试着这样做：

const HotTable = React.lazy(() => import('@handsontable/react'));
React.lazy(
  () => import('handsontable/registry').then((registerAllModules) => {
    registerAllModules();
    return { registeredModules: true };
  })
);

webpack确实将库拆分到另一个包，但HandsOnTable包的加载失败，并出现内容解码错误：

main.90757321a1336791f3c9.bundle.js:2 
GET http://localhost:5000/215.21bf19f9d6a7317b2ad5.bundle.js 
net::ERR_CONTENT_DECODING_FAILED 200 (OK)

更新：这个问题似乎与compression-webpack-plugin有关。如果我禁用压缩，那么包含HandsonTable组件的页面将成功加载。
但我仍然需要去它的工作与压缩。

JavaScript

来源：https://stackoverflow.com/questions/75618385/issue-converting-standard-import-statements-over-to-react-lazy-in-order-to-cod

1条答案

按热度按时间

mwg9r5ms1#

我发现这个问题与compression-webpack-plugin的配置有关：

new CompressionPlugin({
    test: /\.js$|\.css$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
  })

其中一个包低于阈值大小（10240），因此未压缩。
在网络上的许多地方，您会看到以下代码建议Express服务器使用compression-webpack-plugin：

app.get('*.js', function(req, res, next) {
  req.url = req.url + '.gz';
  res.set('Content-Encoding', 'gzip');
  res.set('Content-Type', 'text/javascript');
  next();
});

然而，这段代码并没有考虑到包可能没有被压缩的情况。我更新了这段代码，添加了一个条件，即当没有找到压缩文件时，提供一个非压缩文件：

app.get('*.js', function (req, res, next) {
    const pathToGzipFile = req.url + '.gz';
    // Not all files are compressed due to threshold and minRatio settings.
    if (fs.existsSync(path.join(clientDirPath, pathToGzipFile))) {
      res.set('Content-Encoding', 'gzip');
      req.url = req.url + '.gz';
    }
    res.set('Content-Type', 'application/javascript');
    next();
  });

错误就消失了。

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 将标准import语句转换为React.lazy()以便代码拆分包时出现问题

1条答案

相关问题

热门标签

最新问答