React Chunk 下载背景答案

【问题标题】：React Chunk download backgroundReact Chunk 下载背景
【发布时间】：2019-09-27 22:50:20
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs webpack create-react-app

【解决方案1】：

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

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

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

【讨论】：