代码拆分在 chrome 上加载所有块文件，但在 Firefox 中单独加载它们答案

【问题标题】：Code splitting loads all chunk files on chrome but load them separately in firefox代码拆分在 chrome 上加载所有块文件，但在 Firefox 中单独加载它们
【发布时间】：2020-11-07 00:45:33
【问题描述】：

我使用create-react-app 创建了我的应用程序。

在我的website 中，我对页面组件使用了延迟加载：

import HomePage from '~/containers/pages/HomePage/Loadable';
import RestaurantPage from '~/containers/pages/RestaurantPage/Loadable';
// other routes

const RoutesList = ({ history }) => {
  history.listen(() => {
    window.scrollTo(0, 0);
  });
  return (
    <DefaultLayout history={history}>
      <Switch>
        <Route path="/restaurant/:slug" component={RestaurantPage} />
        // other routes
        <Route exact path="/" component={HomePage} />
        <Route component={ErrorPage} statusCode="404" />
      </Switch>
    </DefaultLayout>
  );
};

我的可加载组件看起来像这样：

import React from 'react';

import LoadingIndicator from '~/components/common/LoadingIndicator';
import loadable from '~/utils/loadable';

export default loadable(() => import('./index'), {
  fallback: <LoadingIndicator />,
});

有了这个懒组件：

/* eslint-disable react/jsx-props-no-spreading */
import React, { lazy, Suspense } from 'react';

const loadable = (importFunc, { fallback = null } = { fallback: null }) => {
  const LazyComponent = lazy(importFunc);

  return (props) => (
    <Suspense fallback={fallback}>
      <LazyComponent {...props} />
    </Suspense>
  );
};

export default loadable;

所以我的问题是，代码拆分在 Firefox 中运行良好。单击菜单中的链接时，仅在访问新页面时才加载分隔的块文件。

但在 chrome 中，每个块文件都会被加载。

【问题讨论】：

标签： reactjs webpack create-react-app code-splitting craco

【解决方案1】：

所以我找到了解决方案。但这很棘手，并且与我的配置有关。

所以发生的事情是我正在使用自定义 webpack 配置（带有 craco），我添加了一个插件 PreloadWebpackPlugin 来为字体、图像添加预加载。

默认情况下，此插件还会向块添加“预加载”。但是 webpack 很聪明，它不会在第一次加载时添加不需要的块文件。

但是发生的事情是我的热模块重载文件列出了所有块文件（因此它可以在发生更改时重新启动），并且这个配置正在“预加载”它们。

所以我唯一要做的就是：

  webpackConfig.plugins.push(
        new PreloadWebpackPlugin({
          rel: 'preload',
          include: 'allAssets',
          fileWhitelist: [/main.chunk.js/, /\.webp/, /\.woff2/, /\.woff/],
        }),
      );

只在主块文件中添加预加载。

现在可以了。

【讨论】：