react-router 按需加载 导致webpack打包的js文件里包含css

Question

这个是router

import React from 'react';
import {Route, Switch,Redirect} from 'react-router-dom'
import {Layout} from 'antd'
import './content.less'
import asyncComponent from './AsyncComponent'


const AsyncIndex = asyncComponent(() => import('../pages/index/index'))
const AsyncTrade = asyncComponent(() => import('../pages/order/Trade'))
const AsyncTransfer = asyncComponent(() => import('../pages/order/Transfer'))


const {Content} = Layout



export default class Contents extends React.Component {
  render() {
    return (
      <Content className="main-content">
        <Switch>
          <Route path="/merchant/console" exact component={AsyncIndex}/>
          <Route path="/trade/index" exact component={AsyncTrade}/>
          <Route path="/transfer/index" exact component={AsyncTransfer}/>
          <Redirect from="*" to="/merchant/console" />
        </Switch>
      </Content>
    );
  }
}

AsyncComponent

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 C = this.state.component

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

  return AsyncComponent
}

但是按需求加载 webpack打包后js文件就会掺杂css

请问该怎么分离出来

Answer 1

不按需加载也包含啊。

webpack 的理念就是把所有的东西都作为模块，js、css、fonts、json、images、……

如果不在 jsx 文件里面 import，可以直接在 html 里面引入