其实几种实现都是近似的,但具体上不太一样,其中有些不需要用到bundle-loader
第一种:ReactTraining/react-router 介绍的基于 webpack, babel-plugin-syntax-dynamic-import
, 和 react-loadable
.
主要是利用了react-loadable这个高级组件,他是专门用来异步加载(也可以预加载)组件的。
第二种:Bundle组件配合webpack组件bundle-loader
bundle-loader效用其实和require.ensure()一样,把组件分片成单独的chunk,在Bundle组件中引入
https://segmentfault.com/a/1190000009539836
第三种:简书AlienZHOU介绍的同样基于create-react-app的方式,在Bundle组件中props入一个()=>import('path')函数
http://www.jianshu.com/p/547aa7b92d8c
第四种,create-react-app文档给的react-router按需加载实现:用一个类Bundle组件的异步函数
https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
结论是:第三种是目前我认为最好的,实现最简单。