Question

在我的React App生产版本中，我需要在后台在浏览器中下载一个块。问题是，当前当我单击一个按钮时，它将开始“等待”模块的导入操作，并等待浏览器拥有该块。由于此模块是功能模块，因此与任何组件都不相关，因此我无法使用代码拆分。

export const dialog_xlsx_array_create = async (raw, head) => {
  const Excel = await import('exceljs/modern.browser');
  let xlsxarray = [];
<----some operations--->

仅当我单击按钮时才调用上述功能。但是这个模块几乎是1 Mb。我需要此模块由浏览器在后台下载（由于大小问题，无法将其与主要块捆绑在一起）

Answer 1

您应该use the webpack magic comment “prefetch”指示浏览器在空闲时间下载此块：

import(/* webpackPrefetch: true */ 'exceljs/modern.browser');

当包含此动态导入的主模块已加载时，这会将预取链接添加到您的head标记

React Chunk下载背景

1 个答案: