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