react-loadable

Demo1:
import React from 'react'
import style from  './demo1.less'
import _ from 'lodash'
class Demo1 extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        console.log(style)
        return (
            <div className={style.box}>
                我是demo1
                <div className={style['box-a']}>
                    aaaa
                    <div className={style['box-a-b']}>
                        ddddd
                    </div>
                    <div className={style['box-a-c']}>
                        cccc
                    </div>
                    <div className={style['box-a-d']}>
                        dddd
                    </div>
                    <img width="100" height="100" src={require('../images/red.png')} />
                    <img width="100" height="100" src={require('../images/eye.png')} />
                </div>
            </div>
        )
    }
}
export default Demo1

index:
import React from 'react';
import loadable from './utility/loadable'
import style from './App.css';
const Demo1 = loadable(()=>import('./demo1/demo1'))
const Demo2 = loadable(()=>import('./demo2/demo2'))
class App extends React.Component {
  constructor(props){
    super(props)
    this.state={
      show:false
    }
  }
  showDemo2=()=>{
    this.setState({
      show:true
    })
  }
  render(){return (
    <div className={style.App}>
      <header className={style.header}>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a 
          onClick={this.showDemo2}
          className={style.link}
        >
          Learn React
        </a>
        {this.state.show&&<><Demo1 />
        <Demo2 /></>}
      </header>
    </div>
  )}
}

export default App;

动态引入Demo1时，Demo.js会被单独打包到一个文件，不会打包到main.js中，而且Demo1中引入的Lodash也会单独打包到一个文件中，不会与其他nodemodules达到到一起。如果index中也引入lodash，那么Demo1中的lodash就会和其他的nodemodules打包到一起。
就是说，动态加载的文件中引入的第三方库，如果在其他非动态组件中没有引入，那么就会单独打包成一个文件，不会同其他第三方库打包在一起。如果其他非动态组件中也引入的有这个第三方库，那么这个第三方库就会和其他第三库库打包在一起。如果多个动态加载的组件中都引入了同一个第三方库，那么这个第三方库只会打包一次,且也是单独打包成一个文件。
webpack会自动将 react-loadable中的文件单独打包成一个独立文件，我们不需要在webpack中做配置，与splitchunks无关。