在react-router中进行代码拆分

发布时间:2019-06-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了在react-router中进行代码拆分脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

随着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 <LoadableComponent/>;
  }
}

Loading 组件内容:

import React from "react"

    export default () => {
        return <div style={{ position: "fixed", left: "50%", top: "50%"}}>Loading......</div>
    }

二、异步函数拆分

创建异步组件:
在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 ? <Com {...this.props} /> : 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() {

return (
  <AppContainer>
    <Provider store={store}>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/home/aa" component={Abc} />
          <Route exact path="/home/bb" component={Bac} />
        </Switch>
      </Router>
    </Provider>
  </AppContainer>
);

}
}

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

脚本宝典总结

以上是脚本宝典为你收集整理的在react-router中进行代码拆分全部内容,希望文章能够帮你解决在react-router中进行代码拆分所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。