react组件懒加载

组件懒加载
方式-：react新增的lazy

const Alert = lazy(() => import('./components/alert'));
export default function App(props) {
    return (
    <div className="App">
        <Suspense fallback="正在加载中...">
          <Alert/>
        </Suspense>
    </div>
  );
}

 

方式二：bundle-loader
npm i --save bundle-loader

{
  loader: 'bundle-loader',
  options: {
    lazy: true
  }
}

使用：

var waitForChunk = require("bundle-loader!./file.js");

// To wait until the chunk is available (and get the exports)
//  you need to async wait for it.
waitForChunk(function(file) {
    // use file like it was required with
    // var file = require("./file.js");
});

 

方式三：import()
符合ECMAScript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 Promise 对象。这意味着模块时异步加载的

方式四：require.ensure

 

路由懒加载



第三方懒加载插件
lazyload-loader
react-loadable
参考：https://segmentfault.com/a/1190000016769108?utm_source=tag-newest#articleHeader3
参考：https://www.jianshu.com/p/871de188adf6