這節主要說的是自定義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;
}

1. Home.js

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

export default Home

1. 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

預期的結果,這樣應該是可以的.可是對於一些es6語法,webpack還是需要配置一番.所以碰到了問題.

發現的問題

1. Uncaught ReferenceError: regeneratorRuntime is not defined

解決方法: 引入transform-runtime.

包的地址

transform-runtime與babel-polyfill的區別

1. Uncaught ReferenceError: webpackJsonp is not defined

解決方法: 引入CommonsChunkPlugin

custom-react原始碼

原文地址