React Router 4.0 + webpack 实现组件按需加载

　　网上关于React Router 4.0的按需加载文章有不少，大体的思路都同样，可是其实具体实现起来却要根据本身的实际状况来定，这里主要介绍一下个人实现方式。

　　主要方式是经过Route组件的render方法加载一个空的组件做为中间，经过空的组件用来加载具体的页面js文件，而后这个组件的内部加载完成的时候就使用webpack 的 import方法动态请求js，当js请求成功后，这个空组件显示具体的加载js内容，提及来比较晦涩，直接上代码。

　　一、先看看中间组件，（因为我这里使用了Typescript, 代码里的ts代码不感兴趣的能够直接忽略便可）

　　

import * as React from 'react';
export namespace LoadComponentAsync {
    export interface Props {
        componentName: string
    }

    export interface State {
        Component: React.ReactType
    }
}

export class LoadComponentAsync extends React.Component<LoadComponentAsync.Props, LoadComponentAsync.State> {
    constructor(props) {
        super(props)
        this.state = {
            Component: null
        }
    }

    componentDidMount() {
 　　　　// 这里使用的import进行动态加载组件
        import(`../componentPublicPath/${this.props.componentName}`
        /* webpackChunkName: "[request]" */
        ).then(Component => {
            this.setState({
                Component: Component.default
            })
        })
    }

    render () {
        let Component = this.state.Component
        if (Component) {
            return <Component />
        } else {
            return null
        }
    }
}

 　　是的，就是这么简单的一个空组件。

　　二、Router部分怎么使用这个组件呢？

<Switch>
      <Route path='/some/path'} exact render={() => {
          return <LoadComponentAsync key={'someKey'} componentName={yourComponentName}/>
      }}/> 

　　　　<Route path='/some/path2'} exact render={() => {
          return <LoadComponentAsync key={'someKey2'} componentName={yourComponentName2}/>
      }}/>  

</Switch>

　　是的仍是这么的超级简单。

 　　三、具体的思路上面的已是核心代码了，

　　你可能还须要配置一下东西，默认的状况你每次加载对应的路由请求的js多是0.js 1.js 2.js这个样子的，显然十分丑陋，我想看他们每一个js组件的具体名字是什么怎么办呢？

　　首先找的你的webpack.config.js,而后，加入一个chunkFilename， 

　　 

　　Yes， 就是这样。而后注意到上面的import里面有个注释了吗

　　

　　这是个啥，Magic Comments, 魔法注释 这个webpackChunkName能够告诉webpack 每一个 chunkname 是什么，这里我[request]表示的意思是每次请求的组件名称做为chunkname ， 

　　本文正文结束啦。

　　顺便提一句，若是你的 Magic Comments 不生效注意你的.babelrc 或者tsconfig.json里是否有去掉注释的逻辑（相似removeComments: true ），有的话须要关掉，而后就能够完美按需加载你的组件喽。

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　注：本文出自博客园 https://home.cnblogs.com/u/mdengcc/ ，转载请注明出处。 稍微尊重一下原创OK？