脚本宝典收集整理的这篇文章主要介绍了react-router4 +react-loadable 实现Code Splitting，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
之前在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,
})
@R_360_995@ default class LoadableDashboard extends React.Component {
render() {
return <LoadableComponent />;
}
}以上是脚本宝典为你收集整理的react-router4 +react-loadable 实现Code Splitting全部内容，希望文章能够帮你解决react-router4 +react-loadable 实现Code Splitting所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。