webpack4结合react-router实现按需加载

webpack4 结合react-router 实现按需引入

主要是配合import()函数进行实现，首先需要自定义一个高阶组件

import React from 'react'
export default function AsyncComps(loads){
    class AsyncComp extends React.Component{
        constructor(props){
            super(props)
            this.state={
                Dom:null
            }
        }
        componentDidMount(){
            this.load()
        }
        load =async () =>{
            const {default:Dom} =await loads()
            this.setState({Dom})
        }
        render(){
            const { Dom } = this.state
            return(
                <>
                    {Dom?<Dom/>:''}
                </>
            )
        }
    }
    return AsyncComp
}

使用：

const Searchs =AsyncComps(()=>import(/* webpackChunkName: "c" */ "../src/pages/search/Search"))
<Route exact path={path} component={Searchs}></Route>
//这个/* webpackChunkName: "c" */，是给webpack的参数，是单打出chunk的名字

原理：
高阶组件接受一个返回promise对象的函数（import函数），通过load去处理这个promise对象，当promise对象resolve后会返回一个module对象（module={dafault:‘默认导出的组件或者function’}），我们就可以得到我们想要的组件，然后再去改变高阶组件并返回。
webpack：
只需要在webpack的output中配置一个chunkFilename的属性，例如chunkFilename:[name].[chunkhash:5].chunk.js，如果没这个属性配置webpack会给chunk一个默认名。