代码拆分将所有块文件加载到chrome上，但分别将它们加载到firefox中 [英] Code splitting loads all chunk files on chrome but load them separately in firefox

问题描述

我使用 create-react-app 创建了我的应用.

I created my app with create-react-app.

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

In my website, I used lazy loading for page components :

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>
  );
};

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

And my Loadable component looks like this :

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中工作正常.单击菜单中的链接时，仅在访问新页面时才加载分离的块文件.

So my problem is, the code splitting works fine in firefox. When clicking a link in a the menu, the separated chunk files are loading only when accessing the new page.

但是在chrome中，每个块文件都已加载.

But in chrome, every chunk files are loaded.

推荐答案

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

So I found the solution. But it was tricky and linked to my configuration.

所以发生了什么事，我正在使用自定义的webpack配置(带有craco)，并且添加了一个插件 PreloadWebpackPlugin 以向字体，图像添加预加载.

So what happened is that I'm using a custom webpack config (with craco), and I addded a plugin, PreloadWebpackPlugin to add preload to fonts, images.

默认情况下，此插件还会添加"preload"大块.但是webpack很聪明，它不会在第一次加载时添加不需要的块文件.

By default, this plugin also add "preload" to chunks. But webpack is smart, it doesn't add the not needed chunk files in the first load.

但是发生的事情是我让热模块重载文件列出了所有块文件(因此当发生更改时它可以重新启动)，并且此配置被预载".他们全部.

But what was happening is that I had the hot module reload file was listing all chunk files (so it can restart when there is a change), and this config was "preloading" them all.

所以我唯一要做的是:

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

仅将预加载添加到主块文件中.

Only add preload to main chunk file.

现在可以使用了.

这篇关于代码拆分将所有块文件加载到chrome上，但分别将它们加载到firefox中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！