React 路由code split

没有使用 require.context 的路由模块，可以使用 react-loadable 来实现页面的懒加载。

import loadable from 'react-loadable';
import NoContext from 'components/NoContext';

const MyTasks = loadable({
  loader: () =>
    import(/* webpackChunkName: "common" */ '../pages/common/MyTasks'),
  loading: NoContext,
});

利用提案中的 import 方法可以返回一个 promise，来实现模块的加载。利用注释设置代码切割后的 chunk 名，例如设置 webpackChunkName 为 common。

如果路由模块中使用了 require.context，则使用 code split 会失败，最终的页面代码会被打包到 main 中，而不会被打包进 chunk。

例如下面的代码就是通过 require.context 来自动加载文件夹中的模块文件。

import path from 'path';
import { kebabCase } from 'lodash';

// 单独设置的视图
const excludePatternList = [/UnrentForm\.jsx$/i, /FeeForm\.jsx/i, /components/];

let routes = [];

const r = require.context('../pages/unrent', true, /^(?!index).+\.jsx?$/);
r.keys()
  .filter(key => !excludePatternList.some(p => p.test(key)))
  .forEach(key => {
    const name = path.basename(path.basename(key, '.jsx'), '.js');
    routes.push({
      exact: true,
      path: '/' + kebabCase(name),
      component: r(key).default,
      requiresAuth: true
    });
  });

react 在最新的版本中，提供了一个 React.lazy 方法来加载 React 组件，也是实现懒加载的一种思路，但我在尝试的过程中发现用不了，可能是 react 版本过低的原因。

wisetc / practice

React 路由code split #16

React 路由code split