React+Redux 项目中的代码分割

编辑于2018年11月02日

按需加载是前端性能优化中的一项重要措施,指的是根据当前页面的需要,只加载相应的必需资源。
要实现按需加载,首先需要进行代码分割。通过 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(<RouterConfig />, 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 (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </Switch>
      </Router>
  );
}

export default RouterConfig;

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

export default () => {
  return (
      <div>
        <h1>主页</h1>
        <Link to="/login">登录页面</Link>
      </div>
  );
}

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

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

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

分割路由页面

通过动态导入路由组件分割路由页面从而实现按需加载,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 ? <Comp {...this.props} /> : <p>loading</p>;
    }
  }

  return AsyncComponent;
}

// router.js

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

function RouterConfig() {
  return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </Switch>
      </Router>
  );
}

export default RouterConfig;

使用 react-loadable

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

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

const LoadingComp = () => <span>loading</span>;

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

function RouterConfig() {
  return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </Switch>
      </Router>
  );
}

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 (
        <Suspense fallback={<div>Loading...</div>}>
          <OtherComponent />
        </Suspense>
    );
  };

  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 (
      <h1>{`登录页面, name: ${name}`}</h1>
  );
};

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 (
        <Suspense fallback={<div>Loading...</div>}>
          <OtherComponent />
        </Suspense>
    );
  };

  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 (
      <Provider store={store}>
        <Router>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/login" component={Login} />
          </Switch>
        </Router>
      </Provider>
  );
}

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

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