webpack3按需加载遇到的问题_react uncaught referenceerror: webpackjsonp is n-CSDN博客

本文链接：https://blog.csdn.net/hesongGG/article/details/78677939

这篇博客探讨了在webpack3中实现按需加载时遇到的问题，包括语法配置需求和特定包的引入。提到了transform-runtime与babel-polyfill的区别，并提供了custom-react源码作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这节主要说的是自定义webpack之关于配置按需加载遇到的问题
- AsyncComponent.js

import React, {Component} from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const {default: component} = await importComponent();

      this.setState({component: component});
    }

    render() {
      const Component = this.state.component;

      return Component
        ? <Component {...this.props}/>
        : null;
    }
  }

  return AsyncComponent;
}

Home.js

import React from 'react'
const Home = () => {
  return (<h1>It's My Home</h1>)
}

export default Home

Menu.js

import React from 'react'
import {Menu, Icon} from 'antd';
import {Link} from 'react-router-dom'
import asyncComponent from './AsyncComponent';

const AsyncHome = asyncComponent(() => import("./Home"))
const SubMenu = Menu.SubMenu;

class MyMenu extends React.Component {
  render() {
    return (
      <Router>
        <Route path="/" component={AsyncHome} />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
          <Menu.Item key="2">
            <Icon type="desktop"/>
            <Link to="/">
              <span>Option 2</span>
            </Link>
         </Menu.Item>
        </Menu>
      </Router>
    )
  }
}

export default MyMenu