Open wisetc opened 5 years ago
没有使用 require.context 的路由模块,可以使用 react-loadable 来实现页面的懒加载。
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。
import
如果路由模块中使用了 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 版本过低的原因。
React.lazy
React 路由code split
没有使用
require.context
的路由模块,可以使用react-loadable
来实现页面的懒加载。利用提案中的
import
方法可以返回一个 promise,来实现模块的加载。利用注释设置代码切割后的 chunk 名,例如设置 webpackChunkName 为 common。如果路由模块中使用了
require.context
,则使用 code split 会失败,最终的页面代码会被打包到 main 中,而不会被打包进 chunk。例如下面的代码就是通过
require.context
来自动加载文件夹中的模块文件。react 在最新的版本中,提供了一个
React.lazy
方法来加载 React 组件,也是实现懒加载的一种思路,但我在尝试的过程中发现用不了,可能是 react 版本过低的原因。