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