尝试使用 React Route 和 Webpack 实现 React “Lazy” 路由以进行代码拆分答案

【问题标题】：Trying to implement a React "Lazy" route for code splitting with React Route and Webpack尝试使用 React Route 和 Webpack 实现 React “Lazy” 路由以进行代码拆分
【发布时间】：2020-10-22 16:41:06
【问题描述】：

我正在尝试实现“惰性路由”以在我的 React 单页应用程序中实现代码拆分。

都是客户端渲染的
我正在使用react-router
也使用Webpack

我有这个组件来呈现我的所有路线。

AllRoutes.js

function AllRoutes() {
  return(
    <Switch>
      <Route exact path={"/ROUTE_A"} component={Component_A}/>
      <Route exact path={"/ROUTE_B"} component={Component_B}/>
      // AND SO ON
    </Switch>
  );
}

我正在尝试做这样的事情：

import LazyRoute from './LazyRoute';

function AllRoutes() {
  return(
    <Switch>
      <Route exact path={"/ROUTE_A"} component={Component_A}/>
      <Route exact path={"/ROUTE_B"} component={Component_B}/>
      <Route exact path={"/ROUTE_C"} component={LazyRoute}/>  // THIS SHOULD LAZY LOAD
    </Switch>
  );
}

这是我尝试过的：

LazyRoute.js

function LazyRoute() {
  return import("@pages/Component_C").then(({default: Component_C}) => {
    return Component_C;
  });
}

export default LazyRoute;

Webpack 似乎在拆分这个 LazyRoute 包方面发挥了作用：

但是我收到了这个错误：

我知道我正在通过执行 return import() 重新调整 Promise。但这不是重点吗？

【问题讨论】：

你可以在这里使用 react lazy...为什么不使用呢？
@yAzou 我知道.. 我可能会使用React.lazy 或Loadable，但我喜欢做一个原始的实现，这样我可以更好地理解它。
我在某个时候能够完成这项工作，但我完全忘记了我是如何做到的。试图在旧文件中查找，但找不到。
如果你愿意，我可以发布一个使用 react lazy 的实现示例
谢谢，我还没试过React.lazy。我会支持它，但我仍在寻找“原始”解决方案，仅使用动态导入。

标签： javascript reactjs lazy-loading code-splitting dynamic-import

【解决方案1】：

您好，您可以在这里使用 React Lazy。这是一个应该使用您的实现的示例。

import React, { lazy } from "react";
import { Route, Switch } from "react-router-dom";
import LazyRoute from './LazyRoute';

const Component_C = lazy(() => import("./Component_C"));

function AllRoutes() {
  return (
<Switch>
  <Route exact path={"/ROUTE_A"} component={Component_A}/>
  <Route exact path={"/ROUTE_B"} component={Component_B}/>
  <Route exact path={"/ROUTE_C"} component={LazyRoute(Component_C)}/>  // THIS SHOULD LAZY LOAD
</Switch>
  );
}

LazyRoute.js

import React, { Suspense } from "react";

function LazyRoute(Component) {
  return props => (
    <Suspense fallback={<div>Loading...</div>}>
      <Component {...props} />
    </Suspense>
  );
}
export default LazyRoute;

【讨论】：

【解决方案2】：

刚刚找到了一个我为此编写的旧解决方案。

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';

const LS = {};

LS.Container_DIV = styled.div`
`;

async function lazyRender() {
  const TestContainer = (await import("@pages/Test/TestContainer"));
  return new Promise((resolve) => {
    resolve(TestContainer);
  });
}

function LazyRoute(props) {
  console.log('Rendering LazyRoute...');

  const [lazyLoading,setLazyLoading] = useState(true);
  const [LazyComponent,setLazyComponent] = useState(null);

  useEffect(() => {
    async function getLazyComponent() {
      const component = await lazyRender();
      setLazyComponent(component);
      setLazyLoading(false);
    }
    getLazyComponent();
  },[]);

  return(
    lazyLoading ?
      <div>I am Lazy Loading....</div>
    : <LazyComponent.default {...props}/>
  );
}

export default React.memo(LazyRoute);

【讨论】：