传统的两种方式

1.import()

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

function component() {
return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}).catch(error => 'An error occurred while loading the component');
} // 或者使用async async function getComponent() {
var element = document.createElement('div');
const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}

 

2.require.ensure

webpack指定的使用方式

webpack v1 v2 指定使用方式

使用方式

require.ensure([], function(require){
var list = require('./list');
list.show();
,'list'); <!-- Router -->
const Foo = require.ensure([], () => {
require("Foo");
}, err => {
console.error("We failed to load chunk: " + err);
}, "chunk-name"); //react-router2 or 3
<Route path="/foo" getComponent={Foo} />

3.lazyload-loader

相对于前两种,此种方式写法更为简洁。

使用方式

// webpack 配置文件中 使用lazyload-loader(必须将lazuyload-loader 放置在use的最右侧)

module: {
rules: [
{
test: /\.(js|jsx)$/,,
use: [
'babel-loader',
'lazyload-loader'
]
},

业务代码中

// 使用lazy! 前缀 代表需要懒加载的Router

import Shop from 'lazy!./src/view/Shop';

// Router 正常使用
<Route path="/shop" component={Shop} />

React ----- 路由懒加载的几种实现方案的更多相关文章

  1. Webpack实现路由懒加载的三种方式

    原文指路:https://blog.csdn.net/qq_37540004/article/details/78727063 第一种: 引入方式(正常引入): const router = new ...

  2. vuex存取token,http简单封装、模拟登入权限校验操作、路由懒加载的几种方式、vue单页设置title

    1.config index.js下面的跨域代理设置: proxyTable: { '/api': { target: 'http://xxxx', //要访问的后端接口 changeOrigin: ...

  3. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  4. vue项目性能优化(路由懒加载、gzip加速、cdn加速)

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

  5. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  6. react组件懒加载

    组件懒加载方式-:react新增的lazy const Alert = lazy(() => import('./components/alert')); export default func ...

  7. vue-cli3项目首页加载速度优化(cdn加速,路由懒加载,gzip压缩)

    今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...

  8. 深入理解React:懒加载(lazy)实现原理

    目录 代码分割 React的懒加载 import() 原理 React.lazy 原理 Suspense 原理 参考 1.代码分割 (1)为什么要进行代码分割? 现在前端项目基本都采用打包技术,比如 ...

  9. vue-router实现路由懒加载( 动态加载路由 )

    三种方式第一种:vue异步组件技术 ==== 异步加载,vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件.第二种:路由懒加载 ...

随机推荐

  1. HDU 4335 Contest 4

    利用降幂公式..呃,还是自己去搜题解吧.知道降幂公式后,就不难了. #include <iostream> #include <cstdio> #include <alg ...

  2. Android源代码解析之(七)--&gt;LruCache缓存类

    转载请标明出处:一片枫叶的专栏 android开发过程中常常会用到缓存.如今主流的app中图片等资源的缓存策略通常是分两级.一个是内存级别的缓存,一个是磁盘级别的缓存. 作为android系统的维护者 ...

  3. 对象不支持“abigimage”属性或方法

    在一个网页中用了一个js插件, js文件引用的没有错,代码也和demo差点儿相同,  可是执行时ie的调试工具报了一个错: 解决方式: jquery文件冲突,发现原来自己引过一个 <script ...

  4. Button的Click事件与js函数的两种不同顺序触发方式

    先运行js.或者先运行Click事件,近期就遇到了这个问题,開始弄了两个button分别运行,那才叫一个蛋疼... 1.先运行js,再运行Button的Click函数 <asp:Button I ...

  5. 单片机: EEPROM和串口通信

    名称:IIC协议 EEPROM24c02 通过串口通信存数读取数据 内容:此程序用于检測EEPROM性能,測试方法例如以下:写入24c02一个数据,然后在内存中改变这些数据. 掉电后主内存将失去这些信 ...

  6. Cocos2d-x 常见宏

    1)NS_CC_BEGIN cocos2d命名空间開始 2) NS_CC_END  cocos2d命名空间结束 3)USING_NS_CC 声明cocos2d命名空间 4)CC_SYNTHESIZE_ ...

  7. error[No partition metadata for topic test-1 due to kafka.common.LeaderNotAvailableException]

    http://stackoverflow.com/questions/23228222/running-into-leadernotavailableexception-when-using-kafk ...

  8. yolo源码解析(1):代码逻辑

    一. 整体代码逻辑 yolo中源码分为三个部分,\example,\include,以及\src文件夹下都有源代码存在. 结构如下所示 ├── examples │ ├── darknet.c(主程序 ...

  9. kentico中的urls

    alias是默认的访问页面 page aliases中可以手动指定访问一个url,然后跳转到当前的页面

  10. Pocket英语语法---五、形式主语是怎么回事

    Pocket英语语法---五.形式主语是怎么回事 一.总结 一句话总结:1.to不定式或动名词可以在主语的位置上,但一般用it代替它做形式主语.这种情况it叫形式主语. It's a great ho ...