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