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

Question

我使用 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 中工作正常。单击菜单中的 link 时，分离的块文件仅在访问新页面时加载。

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

Answer 1

所以我找到了解决方案。但这很棘手并链接到我的配置。

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

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

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

所以我唯一要做的就是：

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

仅将预加载添加到主块文件。

现在可以了。

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

Code splitting loads all chunk files on chrome but load them separately in firefox

reactjs

webpack

code-splitting

create-react-app

craco