export default class Bundle extends Component { constructor(props) { super(props); this.state = { mod: null }; } componentWillMount() { this.load(this.props) } componentWillReceiveProps(nextProps) { if (nextProps.load !== this.props.load) { this.load(nextProps) } } load(props) { this.setState({ mod: null }); //注意这里，使用Promise对象; mod.default导出默认 props.load().then((mod) => { this.setState({ mod: mod.default ? mod.default : mod }); }); } render() { return this.state.mod ? this.props.children(this.state.mod) : null; } }
路由部分没有变化
<Route path="/chat" component={Chat}/>
这时候，执行npm run start，可以看到在载入最初的页面时加载的资源如下
而当点击触发到/chat路径时，可以看到
动态加载了2.chunk.js这个js文件，如果打开这个文件查看，就可以发现这个就是我们刚才动态import()进来的模块。
当然，除了使用import()仍然可以使用require.ensure()来进行模块的异步加载。相关示例代码如下：
const Chat = (props) => ( <Bundle load={(cb) => { require.ensure([], require => { cb(require('./component/chat')); }); }}> {(Chat) => <Chat {...props}/>} </Bundle> );
export default class Bundle extends Component { constructor(props) { super(props); this.state = { mod: null }; } load = props => { this.setState({ mod: null }); props.load(mod => { this.setState({ mod: mod ? mod : null }); }); } componentWillMount() { this.load(this.props); } render() { return this.state.mod ? this.props.children(this.state.mod) : null } }
此外，如果是直接使用webpack config的话，也可以进行如下配置
output: { // The build folder. path: paths.appBuild, // There will be one main bundle, and one file per asynchronous chunk. filename: 'static/js/[name].[chunkhash:8].js', chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js', },
结束
代码拆分在单页应用中非常常见，对于提高单页应用的性能与体验具有一定的帮助。我们通过将第一次访问应用时，并不需要的模块拆分出来，通过scipt标签动态加载的原理，可以实现有效的代码拆分。在实际项目中，使用webpack中的import()、require.ensure()或者一些loader（例如Bundle Loader）来做代码拆分与组件按需加载。