在react-router中进行代码拆分

lolomaco 发布于2019-08-23 15:19 / 626人阅读

摘要：包括在中也是可以使用。下面是的语法接受三个参数第一个参数是一个数组，代表了当前进来的模块的一些依赖第二个参数就是一个回调函数。其中需要注意的是，这个回调函数有一个参数，通过这个就可以在回调函数内动态引入其他模块。

随着react项目的迭代开发，会发现build 下静态文件包的体积会越来越臃肿，首次浏览网页，白屏或loading时间越来越长，所以代码拆分非常必要：

一、 react-loadable 组件拆分：

 安装：
npm install react-loadable -S;

使用方法： App组件中导入 react-loadable组件，app.js 中引入一下代码

：

import Loadable from "react-loadable";
import Loading from "./my-loading-component";

const LoadableComponent = Loadable({
  loader: () => import("./my-component"),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return ;
  }
}

Loading 组件内容:

import React from "react"

    export default () => {
        return Loading......
    }

二、异步函数拆分

创建异步组件：
在src目录下创建异步组件 AsyncComponent

import React, { Component } from "react";
export default function asyncComponent(importComponent) {

class AsyncComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            component: null
        };
    }
    async componentDidMount() {
        const { default: component } = await importComponent();

        this.setState({
            component: component
        });
    }

    render() {
        const Com = this.state.component;

        return (Com ?  : null)
    }
}

return AsyncComponent;

}

使用异步组件

我们将使用它asyncComponent来动态导入我们想要的组件。

const Home = asyncComponent(() => import("./components/Home"));
而不是静态导入我们的组件。

import Home from "./components/Home";

实例：

import React, { Component } from "react";
import "./App.css";
import { Provider } from "react-redux"
import store from "./store"
import { HashRouter as Router, Switch, Route } from "react-router-dom"
import Home from "./Home"
import { AppContainer } from "react-hot-loader";

import asyncComponent from "./AsyncComponent"
const Abc= asyncComponent(() => import("./Abc")); 
const Bac = asyncComponent(() => import("./Bac"));

class App extends Component {
static state = {

}
static submint = () => {

}

render() {

}
}

export default App;

三、require.ensure() 方法

在webpack 2的官网上写了这么一句话：
require.ensure() is specific to webpack and superseded by import().
所以，在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效，所以可以简单介绍一下。包括在webpack 1中也是可以使用。下面是require.ensure()的语法：
require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
require.ensure()接受三个参数：
第一个参数dependencies是一个数组，代表了当前require进来的模块的一些依赖；

第二个参数callback就是一个回调函数。其中需要注意的是，这个回调函数有一个参数require，通过这个require就可以在回调函数内动态引入其他模块。值得注意的是，虽然这个require是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则webpack就无法静态分析的时候处理它；

第三个参数errorCallback比较好理解，就是处理error的回调；

第四个参数chunkName则是指定打包的chunk名称。

因此，require.ensure()具体的用法如下：

require.ensure([], require => {
let chat = require("/components/chart");
someOperate(chat);
}, error => {
console.log("failed");
}, "mychat");
});

GPU云服务器云服务器在防火墙中可以对什么网络进行设置 php中拆分字符 spss中数据拆分进行中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101861.html

react-router4 +react-loadable 实现Code Splitting

摘要：之前在中文官方文档使用的是。实现按需加载，升级之后，这个方法就走不通了。之后看了的官网，按需加载只需要神器。之前在react-router中文官方文档使用的是require。ensure实现按需加载，升级之后，这个方法就走不通了。之后看了react-router的官网，按需加载只需要神器 react-loadable 。react-loadable的好处：基于import()的自...

BaronZhang 2019-08-22 16:58 评论0 收藏0
关于react-router的几种配置方式

摘要：本文给大家介绍的是相比于其他框架更灵活的配置方式，大家可以根据自己的项目需要选择合适的方式。标签的方式下面我们看一个例子当为时渲染我们可以看到这种路由配置方式使用标签，然后根据找到对应的映射。路由的概念路由的作用就是将url和函数进行映射，在单页面应用中路由是必不可少的部分，路由配置就是一组指令，用来告诉router如何匹配url，以及对应的函数映射，即执行对应的代码。 react...

刘永祥 2019-08-20 18:16 评论0 收藏0
基于react+react-router+redux+socket.io+koa开发一个聊天室

摘要：最近练手开发了一个项目，是一个聊天室应用。由于我们的项目是一个单页面应用，因此只需要统一打包出一个和一个。而就是基于实现的一套基于事件订阅与发布的通信库。比如说，某一个端口了，而如果端口订阅了，那么在端，对应的回调函数就会被执行。最近练手开发了一个项目，是一个聊天室应用。项目虽不大，但是使用到了react, react-router, redux, socket.io，后端开发使用了...

NusterCache 2019-08-20 14:48 评论0 收藏0
React 328道最全面试题(持续更新)

摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...

kumfo 2019-08-26 10:13 评论0 收藏0
react router 4

摘要：也走了的路，咳，一切都成组件。中，你可以将各种组件及标签放进组件中，它用来保持与的同步。组件下只允许存在一个子元素。参数偶尔会被使用，它更常用在无法匹配时呈现的空状态。默认为组件示例为关于为拥有优质的文档，你可以查看并从中了解更多的信息 React Router V4 也走了react的路，咳，一切都成组件。例如Route、Link、Switch等都是组件。react-router和r...

CoderBear 2019-08-22 17:10 评论0 收藏0