React 路由懒加载的几种实现方案

这篇文字简单的介绍了React在路由懒加载方面的几种实现方案。

传统的两种方式

import()

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

webpack v2+ 使用

使用方式

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;
}

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} />

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} />

原理 ： https://github.com/rongchanghai/lazyload-loader

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解react-router4 异步加载路由两种方法

    方法一:我们要借助bundle-loader来实现按需加载. 首先,新建一个bundle.js文件: import React, { Component } from 'react' export default class Bundle extends React.Component { state = { // short for "module" but that's a keyword in js, so "mod" mod: null } componen

  • React 路由懒加载的几种实现方案

    这篇文字简单的介绍了React在路由懒加载方面的几种实现方案. 传统的两种方式 import() 符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象.这意味着模块时异步加载的 webpack v2+ 使用 使用方式 function component() { return import( /* webpackChunkName: "lodash" */ 'lodash').then(_

  • vue实现路由懒加载的3种方法示例

    前言 路由懒加载在访问页面的时候非常重要,能够提高首页加载速度,避免出现加载时候白页,如果没有懒加载,webpack打包后的文件会非常大. import按需加载(常用) vue异步组件 webpack提供的require.ensure() 1.import按需加载(常用) 允许将不同的组件打包到一个异步块中,需指定了相同的webpackChunkName. 把组件按组分块 const A = () => import(/* webpackChunkName: "group-A"

  • vue-router路由懒加载及实现的3种方式

    什么是路由懒加载? 也叫延迟加载,即在需要的时候进行加载,随用随载. 官方解释: 1:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 2:如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 官方在说什么呢?为什么需要懒加载? 1:首先,我们知道路由中通常会定义很多不同的页面. 2:这个页面这项目build打包后,一般情况下,会放在一个单独的js文件中 3:但是,如果很多的页面都放在同一个js文件中,必然会造成这个页面

  • vue实现路由懒加载及组件懒加载的方式

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import 1.未用懒加载,vue中路由代码如下 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld'

  • vue-router懒加载的3种方式汇总

    未使用懒加载 import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@components/HelloWorld'; Vue.use(Router); export default new Router({ routes:[ {path:'./', name:'HelloWorld', component:HelloWorld } ] }) vue异步组件 component:resolve

  • vue3 vite异步组件及路由懒加载实战示例

    vue3 vite异步组件及路由懒加载实战示例

    目录 引言 一.前言 1-1.三点变化: 1-2.引入辅助函数defineAsyncComponent的原因: 二.Vue 2.x与Vue 3.x定义比较 2-1.异步组件/路由定义比较 2-2.声明方式比较 2-3.异步组件加载函数返回比较 三.Vue3实践 3-1.路由懒加载实现 3-2.异步组件实现 四.总结 引言 在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异

  • vue-router路由懒加载和权限控制详解

    vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo 所以下面介绍下,路由懒加载 1.为什么要使用路由懒加载呢 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效 2.用法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) e

  • 浅谈解决Hibernate懒加载的4种方式

    浅谈解决Hibernate懒加载的4种方式

    本文总结了我在学习hibernate的过程中,解决hibernate懒加载问题的四种方式. 所谓懒加载(lazy)就是延时加载,延迟加载. 什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载. 至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适,因为内存容量有限,为了减少并发量,减少系统资源的消耗,我们让数据在需要的时候才进行加载,这时我们就用到了懒加载. 例如,有一个对象是Employee,还有一个对象是Department.显然,对于Employee相对Depa

  • vue路由懒加载的实现方法

    本文介绍了vue的路由懒加载,分享给大家,具体如下: 我们可以把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. component可以是一个箭头函数,我们可以使用动态 import语法来定义代码分块点: 如果想在network里面看到动态加载的组件名字,可以加webpackChunkName: 同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName 代码 // router里面的index.js i

  • vue 路由懒加载中给 Webpack Chunks 命名的方法

    最早的路由定义方式 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' import Login from '../views/Login.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', compo

随机推荐