react-router4代码分割

react-router4官方文档： https://reacttraining.com/react-router/web/guides/code-splitting

对于SPA项目，出于加载速度的考虑，肯定不能在页面初始化的时候加载全部js文件，因此需要将代码分块，也就是所谓的code splitting，我这里基于react-router4.1.1展示一个code split的例子，当然，你也可以参考react官方文档

思路解析

react-router4是对之前react-router的一次大改，按照官方的说法，是将路由的问题转变成了react组件的问题，所以在react-router4里面，不同于以往使用require.ensure，我们使用一些其他办法异步的请求组件的js文件。

方案A 使用bundle-loader

bundle-loader git地址：https://github.com/webpack-contrib/bundle-loader

先仿着官方的示例先写一个Bundle组件，简化了一下，大概会是这样的

{/*
// 调用示例
<Bundle load={require('bundle-loader?lazy!./somefile.js')}>
    {(Cmp) => <Cmp></Cmp>}
</Bundle>
*/}

// Bundle.js
import React, { Component } from 'react'

class Bundle extends Component {
  constructor() {
    super()
    this.state = {
      mod: null
    }
  }

  componentDidMount() {
    this.props.load((mod) => {
      this.setState({
        mod: mod.default || mod
      })
    })
  }

  render() {
    return (
      this.state.mod ? this.props.children(this.state.mod) : null
    )
  }
}

export default Bundle

在被传入的load方法被调用的时候，相应的js文件才会被请求和加载

然后在入口的路由文件里面这样写（假设我们有两个组件,Cp1, Cp2）

import React from 'react'
import {
  BrowserRouter,
  Route
} from 'react-router-dom'
import Bundle from './bundle'

let CodeSplit = () => {
  return (
    <BrowserRouter>
      <div>
        <Route path={'/cp1'} render={() => {
          return (<Bundle load={require('bundle-loader?lazy!./cp1')}>
            {(Cp1) => <Cp1></Cp1>}
          </Bundle>)
        }
        }></Route>

        <Route path={'/cp2'} render={() => {
          return (<Bundle load={require('bundle-loader?lazy!./cp2')}>
            {(Cp2) => <Cp2></Cp2>}
          </Bundle>)
        }
        }></Route>
      </div>
    </BrowserRouter>
  )
}

export default CodeSplit

这样，代码分割就完成了。

注意

这里有一个小坑，如果你跟我一样使用的是create-react-app的话，你会发现，在运行代码的时候，会报这个错误

Line 35:  Unexpected '!' in 'bundle-loader?lazy!./cp1'. Do not use import syntax to configure webpack loaders  import/no-webpack-loader-syntax

Line 42:  Unexpected '!' in 'bundle-loader?lazy!./cp2'. Do not use import syntax to configure webpack loaders  import/no-webpack-loader-syntax

这是因为create-react-app不支持webpack-loader，具体的可以看看这个issue

why I can't use bundle-loader like this: https://github.com/facebookincubator/create-react-app/issues/2477

解决办法也很简单，采用方案B

方案B 使用import()

import() 属于es的一个proposal，也就是提案，还没有正式立项，所以具体会有什么问题我这里也不清楚，不过babel已经支持，所以我们这里可以尝试使用，将之前使用bundle-loader的例子改造一下

因为import返回一个promise，所以我们这里将componentDidMount变成一个async函数

{/*
// 调用方法
<Bundle load={() => import(./somefile.js)}></Bundle>
*/}

import React, { Component } from 'react'

class Bundle extends Component {
  constructor() {
    super()
    this.state = {
      mod: null
    }
  }

  async componentDidMount() {
    const {default: mod} = await this.props.load()

    this.setState({
      mod: mod.default || mod
    })
  }

  render() {
    return (
      this.state.mod ? this.props.children(this.state.mod) : null
    )
  }
}

export default Bundle

然后在入口文件的路由里面这么用

import React from 'react'
import {
  BrowserRouter,
  Route
} from 'react-router-dom'
import Bundle from './bundle'

let CodeSplit = () => {
  return (
    <BrowserRouter>
      <div>
        <Route path={'/cp1'} render={() => {
          return (<Bundle load={() => import('./cp1')}>
            {(Cp1) => <Cp1></Cp1>}
          </Bundle>)
        }
        }></Route>

        <Route path={'/cp2'} render={() => {
          return (<Bundle load={() => import('./cp2')}>
            {(Cp2) => <Cp2></Cp2>}
          </Bundle>)
        }
        }></Route>
      </div>
    </BrowserRouter>
  )
}


export default CodeSplit

OK,一个大致的代码分割功能差不多就完成了

*************** 2017.12.7 更新 ****************

方案B改进版

方案B虽然实现了我们异步加载组件的需求，但是调用还是显得比较麻烦，我们需要一种更优雅的方式来实现异步加载，同时还希望能传递参数给组件和自定义组件在加载时候的显示效果，所以这里对方案B进一步进行封装

因为代码比较简单，所以我这里直接把我项目里的代码贴过来了

// async-component.js
/**
 * 用于react router4 code splitting
 */
import React, {Component} from 'react'

/**
 * @param {Function} loadComponent e.g: () => import('./component')
 * @param {ReactNode} placeholder  未加载前的占位
 */
export default (loadComponent, placeholder = null) => {
  class AsyncComponent extends Component {
    unmount = false

    constructor() {
      super()

      this.state = {
        component: null
      }
    }

    componentWillUnmount() {
      this.unmount = true
    }

    async componentDidMount() {
      const {default: component} = await loadComponent()

      if(this.unmount) return

      this.setState({
        component: component
      })
    }

    render() {
      const C = this.state.component

      return (
        C ? <C {...this.props}></C> : placeholder
      )
    }
  }

  return AsyncComponent
}

整体思路和之前的代码是一致的
然后调用的时候只需这么写

Demo组件，就是一个简单的无状态组件

// demo.jsx
import React from 'react'

const Demo = () => {
  return (
    <div>demo</div>
  )
}

export default Demo

调用示例

import asyncComponent from './async-component'

// 获取到异步组件
const AsyncDemo = asyncComponent(() => import('./demo'))

//...
render() {
  return (
    <Route path="/demo" component={AsyncDemo}></Route>
  )
}

// 如果要传参
render() {
  return (
    <Route path="/demo" render={() => {
        <AsyncComponent test="hello"></AsyncComponent>
    }}></Route>
  )
}

参数也可以通过asyncComponent函数进行传递，不过需要更改下async-component.js的代码，因为比较简单，所以这里就不展示了