react-loadable 使用高阶组件动态import组件，实现代码分割（code-splitting）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xutongbao/article/details/84819742

使用后：

 import React, { Component } from 'react'; import Loadable from 'react-loadable';   const LoadableBar = Loadable({   loader: () => import('./Bar'),   loading() {     return <div>Loading...</div>   } });  class App extends Component {   render() {     return (       <div>         <LoadableBar/>       </div>     );   } }  export default App; 

 import React, { Component } from 'react';  class Bar extends Component {   render() {     return (       <div>         bar       </div>     );   } }  export default Bar; 

使用前：

 import React, { Component } from 'react'; import Bar from './Bar';  class App extends Component {   render() {     return (       <div>         <Bar/>       </div>     );   } }  export default App; 

官方github：https://github.com/jamiebuilds/react-loadable

官方npm：https://www.npmjs.com/package/react-loadable

文章来源: react-loadable 使用高阶组件动态import组件，实现代码分割（code-splitting）