之前在react-router中文官方文档使用的是require。ensure实现按需加载,升级之后,这个方法就走不通了。
之后看了react-router的官网,按需加载只需要神器 react-loadable 。
react-loadable的好处:
- 基于import()的自动代码拆分
import()的厉害之处在于 Webpack 2 可以自动拆分代码,不论你在何时加入新代码,都不用做其他额外的工作,你可以通过切换 import() 位置来轻易试验代码拆分点,以便让你的app达到最佳性能。 -
避免组件加载闪烁
Loading组件需要接收一个pastDelay prop(默认200ms)
export default function Loading({ error,pastDelay }) {if (error) { return <div>Error!</div>; } else if (pastDelay) { return <div>Loading...</div>; } else { return null; }
}
-
预加载
Loadable 创建的组件向外暴露了一个用于预加载的静态方法:组件.preload()
最后说到webpack搭配react-loadable实现懒加载:
使用到的库有:react-loadable+plugin-Syntax-dynamic-import
在 .babelrc进行如下配置:{ "presets": [ "react" ],"plugins": [ "Syntax-dynamic-import" ]
}
完整使用如下:
import Loadable from 'react-loadable';
import Loading from './Loading';
const LoadableComponent = Loadable({ loader: () => import('./Dashboard'),loading: Loading,}) export default class LoadableDashboard extends React.Component { render() { return <LoadableComponent />; } }原文链接:https://www.f2er.com/react/301602.html