鍍金池/ 問答/HTML5  HTML/ react-router 按需加載 導(dǎo)致webpack打包的js文件里包含css

react-router 按需加載 導(dǎo)致webpack打包的js文件里包含css

這個(gè)是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文件就會(huì)摻雜css

clipboard.png

請(qǐng)問該怎么分離出來

回答
編輯回答
初念

不按需加載也包含啊。

webpack 的理念就是把所有的東西都作為模塊,js、css、fonts、json、images、……

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

2017年4月18日 17:29