1

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

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

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 中，每个块文件都会被加载。

4

1 回答 1

1

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

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

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

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

所以我唯一要做的就是：

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

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

现在它起作用了。

于 2020-07-21T14:57:59.637 回答