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

　　网上关于React Router 4.0的按需加载文章有很多，大致的思路都一样，但是其实具体实现起来却要根据自己的实际情况来定，这里主要介绍一下我的实现方式。

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

　　1、先看看中间组件，（由于我这里使用了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
        }
    }
}

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

　　2、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>

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

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

　　你可能还需要配置一下东西，默认的情况你每次加载对应的路由请求的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？

转载于:https://www.cnblogs.com/mdengcc/p/11128886.html