在react-router中進行代碼拆分

lolomaco 發布于2019-08-23 15:19 / 671人閱讀

摘要：包括在中也是可以使用。下面是的語法接受三個參數第一個參數是一個數組，代表了當前進來的模塊的一些依賴第二個參數就是一個回調函數。其中需要注意的是，這個回調函數有一個參數，通過這個就可以在回調函數內動態引入其他模塊。

隨著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中數據拆分進行中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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