react-router4 配合webpack require.ensure 实现异步加载的示例

实现异步加载的方法，归根结底大都是根据webpack的require.ensure来实现

第一个是自己使用require.ensure实现，

第二种 使用loader实现

今天我们说的是使用bundle-loader来实现，这样代码更优雅些。

首先需要安装bundle-loader ，具体使用npm还是yarn，就看你的包管理使用的是啥了。

下面需要一个bundle.js

import React, { Component } from 'react';
export default class Bundle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mod: null
    };
  }

  componentWillMount() {
    this.load(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps);
    }
  }

  load(props) {
    this.setState({
      mod: null
    });
    props.load(mod => {
      this.setState({
        mod: mod.default ? mod.default : mod
      });
    });
  }

  render() {
    return this.state.mod ? this.props.children(this.state.mod) : null;
  }
}

然后把bundle.js 引进来，同时也把需要做异步的文件引进来，但是前面需要添加

bundle-loader?lazy&name=[name]!

比如：

import Bundle from './components/bundle.js';
import ListComponent from 'bundle-loader?lazy&name=[name]!./file/List.jsx';

下面就是添加路由这块的配置：

<Route path="/list" component={List} />

以及配置output的chunkFilename

chunkFilename: '[name]-[id].[chunkhash:4].bundle.js'

chunkFilename配置好以后，异步加载进来的文件名称就会按照上面的命名方式来展示，如果不配置，就是webpack给生成的数字了。

上面的都配置好了以后，就是怎么使用bundle了，你看到route上配置的component对应的是List，所以我们需要写一个List：

const List = (props) => (
  <Bundle load={ListComponent}>
    {(List) => <List {...props}/>}
  </Bundle>
);

到这里基本上就配置完了，这个时候你本地重启服务，然后点击对应的路由，就会看到异步记载的js：List-0.094e.bundle.js

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

您可能感兴趣的文章:

  • 详解webpack require.ensure与require AMD的区别
  • vue按需加载组件webpack require.ensure的方法
  • 详解vue项目优化之按需加载组件-使用webpack require.ensure
赞 (0)

相关推荐

  • vue按需加载组件webpack require.ensure的方法

    vue-cli是由vue官方发布的快速构建vue单页面的脚手架. 使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/c

  • 详解webpack require.ensure与require AMD的区别

    简介 require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调函数 语法: require(dependencies: String[], [callback: function(...)]) 参数 dependencies: 模块依赖数组 callback: 回调函数 require-ensure 说明: require.ensure在需要的时候才下载

  • 详解vue项目优化之按需加载组件-使用webpack require.ensure

    详解vue项目优化之按需加载组件-使用webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js  路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/components/Province' import Segm

  • react-router4 配合webpack require.ensure 实现异步加载的示例

    实现异步加载的方法,归根结底大都是根据webpack的require.ensure来实现 第一个是自己使用require.ensure实现, 第二种 使用loader实现 今天我们说的是使用bundle-loader来实现,这样代码更优雅些. 首先需要安装bundle-loader ,具体使用npm还是yarn,就看你的包管理使用的是啥了. 下面需要一个bundle.js import React, { Component } from 'react'; export default class

  • 详解React开发中使用require.ensure()按需加载ES6组件

    首先介绍下动态加载函数: require.ensure([], (require)=>{ let A = require('./a.js').default; }) 如果想要动态加载出es6代码组件,直接require一个es6风格的组件是不行的,因为一般的语言编译工具(如babel),不支持直接require一个es6风格的组件. 那么有种办法可以解决:在es6方式书写的组件底部增加一句:module.exports = YouclassName; import React, {Compone

  • javascript loadScript异步加载脚本示例讲解

    一.语法:loadScript(url[,callback])或者loadScript(settings)二.settings支持的参数:url:脚本路径async:是否异步,默认false(HTML5)charset:文件编码cache:是否缓存,默认为truesuccess:加载成功后执行的函数,优先执行callback.三.调用举例: 复制代码 代码如下: //loadScript(url[,callback])loadScript("http://code.jquery.com/jque

  • react 实现页面代码分割、按需加载的方法

    react 实现页面代码分割、按需加载的方法

    虽然一直有做 react 相关的优化,按需加载.dll 分离.服务端渲染,但是从来没有从路由代码分割这一块入手过,昨天在本地开发时没有测试成功,今天又搞了下,已经部署到线上环境了,今天就这个记录一下. 修改配置 开发环境:webpack@v3 .react-router@v4 安装依赖: $ yarn add babel-plugin-syntax-dynamic-import -dev 修改 .babelrc 文件:在 plugins 中添加 "syntax-dynamic-import&qu

  • 详解webpack异步加载业务模块

    详解webpack异步加载业务模块

    虽然把我们用到的JS文件全部打包一个可以节省请求数,但如果打包后的JS文件过大,那么也容易出现白屏现象,许多操作失灵.而且一些区域是点到才出现,那么相关的JS其实可以剥离出这个大JS文件外.这就涉及到异步加载了.异步加载是SPA的重要构建方式之一. 我们沿着上一篇的目录,这次学习webpack的require.ensure API.此文件也叫做ensure.html,涉及到avalon, jquery,还有两个业务代码ensure.js与ensure_a.js. 先看我们的页面: <!DOCTY

  • 详解webpack分包及异步加载套路

    最近一个小项目是用webpack来进行构建的.其中用到了webpack分包异步加载的功能.今天抽时间看了下webpack打包后的文件,大致弄明白了webpack分包及异步加载的套路. 由于这个小项目是用自己写的一个路由,路由定义好了不同路径对应下的模板及逻辑代码: webpack配置文件: var path = require('path'), DashboardPlugin = require('webpack-dashboard/plugin'), HtmlWebpackPlugin = r

  • 详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)

    最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结 为什么是webpack 1.webpack一下自己就

  • vue+webpack实现异步加载三种用法示例详解

    1.第一例 const Home = resolve => { import("@/components/home/home.vue").then( module => { resolve(module) } } 注:(上面import的时候可以不写后缀) export default [{ path: '/home', name:'home', component: Home, meta: { requireAuth: true, // 添加该属性可以判断出该页面是否需要

  • 手把手教您实现react异步加载高阶组件

    本篇文章通过分析react-loadable包的源码,手把手教你实现一个react的异步加载高阶组件 1. 首先我们想象中的react异步加载组件应该如何入参以及暴露哪些API? // 组件应用 import * as React from 'react'; import ReactDOM from 'react-dom'; import Loadable from '@component/test/Loadable'; import Loading from '@component/test/

  • 详解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

随机推荐