首页 > 其他 > 详细

react组件懒加载

时间:2019-11-07 15:01:11      阅读:99      评论:0      收藏:0      [点我收藏+]

组件懒加载
方式-: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

 

react组件懒加载

原文:https://www.cnblogs.com/dshvv/p/11811512.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!