React+Redux 项目中的代码分割

按需加载是前端性能优化中的一项重要措施，指的是根据当前页面的需要，只加载相应的必需资源。
要实现按需加载，首先需要进行代码分割。通过 Webpack 这样的工具，我们可以按模块将相应的代码打包到一个文件中，从而实现代码分割。
不过，今天并不是讨论如果使用 Webpack 进行代码分割，而是在 React+Redux 项目中，我们如何通过动态导入分离路由和相应的 Redux 模块。

准备一个基本项目

直接使用 create-react-app 初始化一个 React 项目，安装 react-router 和 redux。

接着创建两个路由页面，一个主页和一个登录页面，主页中有一个按钮可以跳转到登录页面。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';

import RouterConfig from './router';

ReactDOM.render(, document.getElementById('root'));

// router.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

import Home from './route/Home';
import Login from './route/Login';

function RouterConfig() {
  return (
      
        
          
          
        
      
  );
}

export default RouterConfig;

// route/Home.js
import React from 'react';
import { Link } from 'react-router-dom';

export default () => {
  return (
      

        
主页
        登录页面
      
  );
}

// route/Login.js
import React from 'react';

export default () => {
  return (
      
登录页面
  );
}

此时执行 yarn build 操作，主页和登录页面的代码会打包到一个文件中。

main_js.png

分割路由页面

通过动态导入路由组件分割路由页面从而实现按需加载，Webpack 内置了该功能。此外，还需要使用 @babel/syntax-dynamic-import 插件提供语法支持，对应的 babel 配置如下：

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "@babel/syntax-dynamic-import"
  ]
}

调整 router.js 代码，动态导入页面组件。

const Home = () => import('./route/Home');
const Login = () => import('./route/Login');

此时执行 yarn build 可以发现已经将代码进行了分割。但是页面无法正常访问了，因为动态导入是一个异步操作，它返回的并不是一个组件而是 Promise。

我们可以创建一个叫做 AsyncComponent 的组件，它接受动态导入的返回值作为属性，在内部会判断组件是否加载完毕，如果加载完毕则渲染组件，否则显示 Loading。

// component/AsyncComponent.js

import React, { Component } from 'react';

export default (loader) => {
  class AsyncComponent extends Component {
    state = {
      component: null,
    };

    componentWillMount() {
      if (!this.state.component) {
        loader().then(module => {
          this.setState({ component: module.default });
        });
      }
    }

    render() {
      const Comp = this.state.component;
      return Comp ?  : 
loading
;
    }
  }

  return AsyncComponent;
}

// router.js

const Home = AsyncComponent(() => import('./route/Home'));
const Login = AsyncComponent(() => import('./route/Login'));

function RouterConfig() {
  return (
      
        
          
          
        
      
  );
}

export default RouterConfig;

使用 react-loadable

我们大可不必自己实现 AsyncComponent，react-loadable 就是一个不错的选择。

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Loadable from 'react-loadable';

const LoadingComp = () => loading;

const Home = Loadable({
  loader: () => import('./route/Home'),
  loading: LoadingComp,
});
const Login = Loadable({
  loader: () => import('./route/Login'),
  loading: LoadingComp,
});

function RouterConfig() {
  return (
      
        
          
          
        
      
  );
}

export default RouterConfig;

使用 React16.6 新特性

React 新发布的 16.6 版本提供了 lazy 方法和配套的 Suspense 组件，用来处理异步渲染场景。通过新特性重新实现 AsyncComponent：

import React, { lazy, Suspense } from 'react';

export default (loader) => {
  const OtherComponent = lazy(loader);

  const Component = () => {
    return (
        Loading...

}> ); }; return Component; }

分割 Redux 模块

这一部分主要参考 Twitter 的做法。

一个 Redux 模块包含 reducers、actions、action creators、state selectors。我们来创建一个 user Redux 模块。

// model/user.js

const reducerName = 'user';

const initialState = {
  login: false,
  profile: {
    name: 'tom',
  },
};

const createActionName = name => `app/${reducerName}/${name}`;

// actions
export const LOGIN_SUCCESS = createActionName('LOGIN_SUCCESS');
export const UPDATE_PROFILE = createActionName('UPDATE_PROFILE');

// action creators
export const updateProfile = payload => ({ payload, type: UPDATE_PROFILE });

// reducer
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case LOGIN_SUCCESS:
      return { ...state, login: true };
    case UPDATE_PROFILE:
      return { ...state, profile: action.payload };
    default:
      return state;
  }
}

// selectors
export const selectLoginState = state => state.login;
export const selectProfile = state => state.profile;

然后我们把 user Model 和登录页面 connect 连接起来：

import React from 'react';
import { connect } from 'react-redux';

const Login = ({ name }) => {
  return (
      
{`登录页面, name: ${name}`}
  );
};

const mapStateToProps = ({ user }) => ({
  name: user.profile.name,
});

export default connect(mapStateToProps)(Login);

到目前为止，我们将登录页面和登录页面所需要用到的状态管理相关代码（user Redux moudle）整合到了一次，这对于代码分割非常有利。

但是当我们将 reducer 添加到 Redux store 时，就不是那么美好了。Model 相关代码在一开始就会被加载进来，即使目前还没有页面会用到它。

运行时注册 Reducer

通过 replaceReducer 函数，我们可以在访问相应的页面时再添加 Reducer 到 Redux store 中。

实现 ReducerRegistry 并修改 createStore 的代码：

// model/reducerRegistry
export class ReducerRegistry {
  constructor() {
    this._emitChange = null;
    this._reducers = {};
  }

  getReducers() {
    return { ...this._reducers };
  }

  register(name, reducer) {
    this._reducers = { ...this._reducers, [name]: reducer };
    if (this._emitChange) {
      this._emitChange(this.getReducers());
    }
  }

  setChangeListener(listener) {
    this._emitChange = listener;
  }
}

const reducerRegistry = new ReducerRegistry();
export default reducerRegistry;

// model/createStore
import { combineReducers, createStore } from 'redux';
import reducerRegistry from './reducerRegistry';

const initialState = {};

const combine = (reducers) => {
  const reducerNames = Object.keys(reducers);
  // 维持仍为加载的 reducer 的初始化状态
  Object.keys(initialState).forEach(item => {
    if (reducerNames.indexOf(item) === -1) {
      reducers[item] = (state = null) => state;
    }
  });
  return combineReducers(reducers);
};

const reducer = combine(reducerRegistry.getReducers());
const store = createStore(reducer, initialState);

// 当一个新的 reducer 注册时，替换 store 的 reducer
reducerRegistry.setChangeListener(reducers => {
  store.replaceReducer(combine(reducers));
});

export default store;

现在，我们已经可以动态加载 reducer 了。接着，我们只需要在导入页面的同时注册相应的的 reducer 即可。

导入页面和模型

我们实现一个 dynamicWrapper，接受一个页面 loader 函数和模型名称数组。默认模型都在 model 目录下，且文件名和模型相对应。

import React, { lazy, Suspense } from 'react';
import reducerRegistry from './model/reducerRegistry';

const asyncComponent = (loader) => {
  const OtherComponent = lazy(loader);

  const Component = () => {
    return (
        Loading...

}> ); }; return Component; }; export default (compLoader, modelNames) => { const loader = () => { let modelLoader; if (modelNames) { modelLoader = () => modelNames.map((name) => import(`./model/${name}`)); } const component = compLoader(); const models = modelLoader ? modelLoader() : []; return Promise.all([...models, component]).then(ret => { if (!models || !models.length) { return ret[0]; } else { const len = models.length; ret.slice(0, len).forEach((m, index) => { m = m.default || m; reducerRegistry.register(modelNames[index], m); }); return ret[len]; } }); }; return asyncComponent(loader); }

使用起来也很简单，我们调整一下 router.js 中的代码：

const Home = dynamicWrapper(() => import('./route/Home'));
const Login = dynamicWrapper(() => import('./route/Login'), ['user']);

function RouterConfig() {
  return (
      
        
          
            
            
          
        
      
  );
}

现在 model/user.js 并不会在一开始就加载，而是在访问登录页面时才会加载进来。

我最近打算做一个 React 模板项目，包含我平时 React 项目中常用的一些库和模板代码，到时候也会包含代码分割这部分。如果想看这部分源码，可以访问 Github。